border-style 默认为 none，不显式指定如 solid 则边框不可见；表格需同时设 border-collapse: collapse 和各单元格 border-style；box-sizing 和 overflow 也会影响边框显示。
border-style 默认是 none，不写就等于没边框
这是最常被忽略的底层原因：CSS 中 border 是简写属性，它由 border-width、border-style 和 border-color 三部分组成。而 border-style 的默认值是 none —— 意味着即使你写了 border: 2px #333，只要没显式指定样式（如 solid），浏览器就当它不存在。
- 错误写法：
border: 2px #333;→ 实际等价于border: 2px none #333;，边框不可见 - 正确写法：
border: 2px solid #333;或分开写：border-width: 2px; border-style: solid; border-color: #333; - 表格场景尤其易踩坑：只给
table设border，但没设th/td的border-style，单元格边框照样不出现
表格边框“消失”大概率是 border-collapse 和边框未同步设置
HTML 表格默认使用 border-collapse: separate，此时 table 的边框和 th/td 的边框是分离的；如果只设置了其中一方，或者 border-spacing 过大，视觉上就像边框“不见了”。
- 要显示完整单线边框：必须同时设置
border-collapse: collapse;，且为table、th、td都定义border（含style） - 常见漏点：
col或colgroup元素会干扰边框渲染，建议避免在它们上设border - 若用
border-collapse: separate，记得检查border-spacing是否为 0，否则间隙可能“吃掉”细边框
边框被裁剪或挤出视口：overflow 和 box-sizing 的隐性影响
边框本身画在元素内容区之外，一旦父容器设置了 overflow: hidden，或者子元素宽度用了 width: 100% 却没处理 border 占据的空间，边框就会被截断或移出可视区域。
-
overflow: hidden会直接裁掉超出容器的部分——包括边框，哪怕边框在元素自身范围内 -
width: 100%+border> 容器宽度 → 溢出。解决方式二选一：box-sizing: border-box;（推荐），或手动减去边框宽度：width: calc(100% - 4px); - 某些 UI 框架（如 Bootstrap）重置了
box-sizing，需全局确认是否已设为border-box
颜色、尺寸、可见性这些“看起来没毛病”的细节
边框存在，但看不见，往往不是语法错，而是视觉层面失效。这类问题查起来慢，但改起来快。
立即学习“前端免费学习笔记（深入）”；
- 边框色和背景色相同（比如
border: 1px solid white;在白色背景上）→ 换成高对比色快速验证，如red或#f00 - 宽度太小（如
0.5px）在低 DPI 屏幕可能渲染为 0 → 至少用1px起步，必要时加transform: scale(1.5)辅助调试 - 元素本身不可见：
display: none、visibility: hidden、opacity: 0、或被z-index更低的兄弟元素完全遮盖 - CSS 选择器权重不足被覆盖 → 打开浏览器开发者工具，看
Computed面板里border是否被划掉，或被更高权重要求覆盖
边框不显示，90% 的情况不是浏览器 bug，而是 border-style 缺失、表格边框未合并、或 box-sizing / overflow 的连锁反应。真正难排查的，往往是那个“明明写了却没生效”的 border——它很可能正安静地躺在 none 状态里，等你补上一个 solid。
