最可靠加边框方式是直接用border属性，需同时指定宽度、样式、颜色三值；单边用border-top等方向属性；border-radius需配合border使用；内联元素加边框需注意vertical-align或改display。
直接用 border 属性最可靠
所有现代浏览器都支持 border，它是最直接、最可控的加边框方式。别绕弯子去用 outline 或 box-shadow 模拟边框，除非你明确需要它们的特殊行为（比如不占布局空间）。
常见错误是只写 border: 1px; —— 这无效，因为 border 是复合属性，必须包含宽度、样式、颜色三者，缺一不可。
-
border: 1px solid #000;✅ 完整写法 -
border: 1px solid;❌ 缺少颜色，部分浏览器会忽略 -
border: solid #000;❌ 缺少宽度，边框不显示
单边边框用 border-top 等方向属性
只给上边或右边加线，就用 border-top、border-right 这类方向性属性。比写全 border 再覆盖其他三边更简洁，也避免意外重置。
注意：这些方向属性和 border 复合属性不是互斥的，但有优先级——方向属性会覆盖 border 中对应边的设置。
立即学习“前端免费学习笔记（深入）”；
- 想只保留底边：用
border-bottom: 2px dashed red;，不用先写border: none;再单独设底边 - 如果已用
border: 1px solid #ccc;，又想把右边加粗，直接加border-right: 3px solid #000;即可 - 方向属性不支持简写成
border-x这种，必须写全border-left、border-bottom等
border-radius 和 border 一起用才出圆角
很多人以为加了 border-radius 就自动带边框，其实它只是切角，没 border 就看不见效果。两者要配合使用。
另外，border-radius 的值不能为负数；百分比值基于元素宽高计算，遇到响应式布局时可能表现不稳定。
- 圆角边框：同时写
border: 1px solid #333;和border-radius: 4px; - 想让边框在圆角处保持平滑衔接，确保没有
overflow: hidden;意外裁剪（尤其内部有绝对定位元素时） - IE9+ 支持
border-radius，但 IE9 不支持百分比写法，建议用 px 值保兼容
内联元素加边框可能撑开行高
span、a 这类默认 display: inline 的元素，加 border 后不会换行，但可能把所在行的行高顶高，导致上下文字错位。
这不是 bug，是 inline 元素的 baseline 对齐机制在起作用。解决方法不是删边框，而是调整显示模式或对齐方式。
- 快速修复：加
vertical-align: middle;或vertical-align: bottom; - 更稳妥：改用
display: inline-block;，这样边框完全受控，且不影响周围行高 - 慎用
display: block;，它会让内联元素独占一行，破坏原有流式布局
border-style 的 dotted 在不同浏览器下点距不一致，double 的中间空隙宽度也不统一，真要像素级还原设计稿，得亲自在目标环境里测。 
