border-style合法值有solid、dashed、dotted、double、groove、ridge、inset、outset；现代浏览器全支持，IE7及更早仅支持前4个，后4个退化为none。
border-style 有哪些合法值，浏览器支持情况如何
所有现代浏览器都完整支持 solid、dashed、dotted、double、groove、ridge、inset、outset 这 8 个关键字。IE8+ 没问题，但 IE7 及更早版本不支持 groove、ridge、inset、outset，会退化为 none —— 实际项目中如果还要兼容 IE7，这些 3D 效果值基本等于不能用。
常见错误现象：border-style: dashed; 在某些高分屏或缩放比例下（比如 Windows 125% 缩放），Chrome 可能渲染成断续不均的短线，甚至看起来像点线；这不是写法错，是渲染精度限制。
-
solid最稳定，无兼容性顾虑，适合所有需要明确边界的场景 -
dashed和dotted在打印样式表里容易被忽略（部分打印机驱动不识别虚线），如需打印可见，优先选solid加浅色 -
double要求 border-width ≥ 3px 才能看清双线，设成1px double会退化为单线
为什么 dotted 在 Chrome 和 Safari 下表现不一样
根源在于规范没规定点的形状和间距——dotted 的“点”在 Chrome/Firefox 是圆形，在 Safari 是方形（实际是小矩形）。这导致同样 border: 2px dotted #000，Safari 的点更密、更实，Chrome 的点更松散、更“空”。这不是 bug，是实现差异。
使用场景：如果你用 dotted 做分隔线或装饰边框，且设计稿对点距敏感，就得接受它跨浏览器不一致。想强制统一？只能放弃 dotted，改用 background-image 或伪元素 + box-shadow 模拟。
立即学习“前端免费学习笔记（深入）”；
- 不要指望
dotted在所有浏览器里“长得一样” - 移动端 Safari（iOS）同样用方形点，和桌面 Safari 行为一致
-
border-radius对dotted无效：圆角区域的点会被裁切，不会自动适配弧度
groove、ridge 看不出立体感？原因和补救
这两个值依赖 border-color 和 background-color 的相对明暗关系来模拟浮雕效果。groove 需要 border-color 比背景色深才能显凹陷，ridge 则相反。如果设了纯黑边框 #000 但背景也是深色（比如 #111），就完全看不出层次。
性能影响极小，但可访问性上要注意：依赖视觉明暗对比的 3D 效果，对色觉障碍用户几乎不可分辨，WCAG 不建议单独靠它传递信息。
- 必须同时控制
border-color和父容器background-color，缺一不可 - 推荐用系统默认色测试：
border: 4px groove ButtonFace;（ButtonFace 是 Windows 系统按钮背景色） - 别给
groove/ridge设太细的宽度（如1px），否则阴影细节丢失，只剩一条实线
用 border-style 做响应式边框时容易漏掉什么
很多人只改 border-width 或 border-color 做响应式，却忘了 border-style 本身也需要响应式切换。比如小屏下 dashed 太碎，想换成 solid，但没在媒体查询里重写 border-style，结果还是虚线。
另一个坑是简写覆盖：border: 1px solid #000 会把之前单独设的 border-style: dotted 直接干掉，因为简写会重置所有子属性。
- 响应式边框必须显式声明
border-style，不能假设它继承或保持不变 - 避免混用简写和独立属性，尤其在 CSS 预处理器里嵌套时，容易意外覆盖
- 用
border-bottom-style等单边属性时，记得其他三边仍受全局border-style影响，不是完全独立
最常被忽略的一点：border-style 的渲染依赖于 border-width 是否为 0。哪怕写了 border-style: solid，只要 border-width: 0，边框就彻底消失——它不参与渲染，也不占布局空间。这点在用 CSS 变量动态控制边框时特别容易翻车。
