border: 1px solid #000 是最直接的实线边框写法；HTML5 不提供边框语法，完全由 CSS 控制，需完整指定宽度、样式、颜色三值，且元素须有尺寸和正常渲染流才能显示边框。
border: 1px solid #000 是最直接的实线边框写法
HTML5 本身不提供“设置边框”的语法，边框完全由 CSS 控制。所谓“HTML5 设置边框”，实际是用 style 属性或外部 CSS 给元素加 border 声明。最常用、最不容易出错的就是三值写法：border: 1px solid #000 —— 宽度、样式、颜色缺一不可。
常见错误包括：
- 只写
border: solid（缺宽度和颜色，浏览器会忽略） - 写成
border-style: solid却没设border-width（默认为 0，看不见边框） - 用
border: 1px #000（漏掉solid，部分浏览器可能不渲染）
inline 元素如 <span> 默认不显示 border，需先设 display
<span>、<a> 这类内联元素即使加了 border: 1px solid red，也可能“看起来没边框”——因为它们默认 display: inline，且 border 只作用于盒模型的 border-box 区域，而 inline 元素的上下 border 不影响布局，有时被行高“吞掉”或视觉上难察觉。
解决办法很简单：
立即学习“前端免费学习笔记（深入）”；
- 加
display: inline-block或display: block - 或者用
display: inline-flex（兼容性稍低但更可控） - 避免只靠
vertical-align调整位置来“补救”边框显示问题
border 的三个核心参数不能省略任意一个
border 是复合属性，展开后对应 border-width、border-style、border-color。浏览器只认完整三元组，哪怕你只想改颜色，也得带上宽度和样式：
- ✅ 正确：
border: 2px solid #333 - ✅ 正确（只改颜色，保留原宽和样式）：
border-color: #f00 - ❌ 错误：
border: #000（浏览器当无效声明处理） - ❌ 错误：
border: solid #000（缺宽度，多数浏览器不渲染）
注意：border-style 必须是 solid、dashed、dotted 等合法值，none 和 hidden 也会导致无边框，别误当成“透明”用。
想让边框“紧贴内容”？优先用 box-sizing: border-box
默认 box-sizing: content-box 下，加 border 会让元素总宽 = width + padding + border，容易撑破容器。初学者常以为“边框变粗了”，其实是盒子变大了。
更符合直觉的做法是统一加：
-
*, *::before, *::after { box-sizing: border-box; }（全局重置） - 或单独给目标元素设：
box-sizing: border-box
这样 width: 200px; border: 2px solid #000; 就真等于“内容区 + 边框总共 200px”，而不是“内容区 200px 再加 4px 边框”。
真正容易被忽略的点：border 的渲染依赖于元素是否具有“尺寸”和“渲染流中的占位”。空的 <div>、未设 height/min-height 的 flex item、或被 overflow: hidden 截断的区域，都可能导致边框“存在但不可见”。检查时先确认元素有宽高、有内容、没被父级裁剪。
