用 border 属性可直接为任意 html 元素添加边框，但需注意颜色不可省略、input 需重置默认样式；border 是 width/style/color 的简写；单边控制用 border-top 等；圆角需配合 border-radius；语义化带标题边框应使用 fieldset/legend；禁用边框用 border: none 而非删除标签；避免用 table/hr/outlines 模拟边框；box-shadow 仅模拟不可替代 border；性能问题多见于 border-image 或动画 color；兼容性上 ie8 不支持 border-radius，深色模式推荐用 currentcolor 或 css 变量。
用 border 属性给任意 HTML 元素加边框最直接
几乎所有块级和行内元素（如 <div>、<code><p></p>、<span></span>）都能通过 CSS 的 border 添加边框，无需额外标签。关键不是“怎么加”，而是“加在哪”和“加成什么样”。
常见错误是只写 border: 1px solid;——漏掉颜色，浏览器会默认用当前文字色，但容易误以为没生效；或者在 <input> 上加了边框却忘了清除浏览器默认样式，导致双线重叠。
-
border是简写，等价于border-width border-style border-color，三者缺一不可（颜色可省略，但有风险） - 想只加某一边？用
border-top、border-left等单独控制 - 圆角边框必须配
border-radius，且它不影响边框本身，只影响绘制形状
div.example {
border: 2px dashed #333;
border-radius: 4px;
}
<fieldset></fieldset> 和 <legend></legend> 是语义化“带标题边框”的唯一原生方案
如果目标是“一个带标题的框”，比如表单分组或设置区块，别用 <div> + <code>border 硬套。HTML 原生提供了语义准确、无障碍友好的组合：<fieldset></fieldset> 自带边框，<legend></legend> 会自动嵌入边框顶部作为标题。
注意：默认样式各浏览器略有差异，<legend></legend> 的定位行为（如居中偏移）不能靠 text-align 改变，得用 legend { margin: auto; } 或 flex 微调。
立即学习“前端免费学习笔记（深入）”；
- 禁用边框？设
border: none在<fieldset></fieldset>上即可，但别删标签——否则语义丢失 - 想让
<legend></legend>在左侧？需配合float: left或display: flex，纯 CSS 无通用一行解 - 不支持
<fieldset></fieldset>的老 IE（如 IE8）会忽略border-radius，但边框本身仍显示
<fieldset> <legend>用户信息</legend> <label>姓名：<input type="text"></label> </fieldset>
避免用 <table> 或 <code><hr> 模拟边框
有人用 <table border="1"> 或在内容前后塞两个 <code><hr> 来“画框”，这属于过时且语义错误的做法。前者破坏结构语义，后者无法包裹内容、不能设圆角、响应式下易错位。
更隐蔽的问题是：用 outline 替代 border（比如为了“不占布局空间”），结果发现焦点状态干扰正常边框，或打印时 outline 默认不输出。
-
outline不参与文档流，不会触发父容器重新计算高度，但也不该用于常规边框 -
box-shadow: 0 0 0 1px #000可模拟边框，但它是“阴影”，不是边框——不响应border-radius的内圆角，且可能被其他元素遮挡 - 表格边框应仅用于表格数据，而非页面布局或装饰性框线
边框性能与兼容性要注意的点
绝大多数边框毫无性能负担，但以下情况例外：大量元素同时使用 border-image（尤其含 SVG 或渐变），或在移动端对滚动区域内的元素频繁动画 border-color（触发布局重排）。
IE8 及更早版本不支持 border-radius 和 border-collapse: separate 的某些值；Android 4.3 及以下 WebView 对 border-style: groove 渲染异常。
- 需要兼容老环境？用
border: 1px solid #ccc最稳妥，避免double、ridge等样式 - 深色模式下边框颜色别写死，优先用
border-color: currentColor或 CSS 变量配合@media (prefers-color-scheme: dark) - 用
border-box盒模型前确认父容器没有意外的padding挤压边框显示位置
