css border简写必须按“宽度→样式→颜色”顺序书写，如border: 1px solid #333；错误顺序（如solid 1px #333）将被浏览器忽略；颜色可省略但回退为currentColor。
border 简写语法顺序不能错
CSS border 简写必须按「宽度 → 样式 → 颜色」顺序书写，缺一不可（颜色可省略但会回退为 currentColor）。写成 border: solid 1px #333 是错的——浏览器会忽略整条声明；正确写法是 border: 1px solid #333。
- 宽度值必须带单位（如
1px、0.125em），thin/medium/thick也可用但不推荐（渲染不一致） - 样式只能是
none、hidden、dotted、dashed、solid、double等标准值，不能用auto或自定义字符串 - 颜色支持所有 CSS 颜色语法：
#333、rgb(51,51,51)、var(--border-color)，但不能写inherit（需单独设border-color）
单独设置某一边时别用 border 简写
想只改底部边框？别写 border-bottom: 1px solid #ccc 后又补一句 border: none——后者会覆盖前者。简写属性会重置所有三要素，包括你没写的那几边。
- 单边控制请直接用
border-top/border-right/border-bottom/border-left - 如果已用过
border简写，后续只想改颜色，就单独写border-color: #666，它只影响颜色，不碰宽度和样式 - 要清空某一边？用
border-bottom: none，不是border-bottom-width: 0（后者保留样式和颜色，可能意外显示虚线点）
border-style 值可以分别指定四边
border-style 是少数支持「多值语法」的边框属性，能一次性定义上右下左的样式，比如 border-style: dotted solid dashed double。这个特性常被忽略，但能避免写四行重复代码。
- 1 个值：四边统一（
border-style: dashed） - 2 个值：上下 / 左右（
border-style: solid dotted） - 3 个值：上 / 左右 / 下（
border-style: solid dotted double） - 4 个值：上 / 右 / 下 / 左（顺时针，
border-style: solid dotted double dashed） - 注意：
border简写本身不支持这种分边写法，必须拆成border-style单独设
div.card { border: 1px solid #e0e0e0; border-style: solid dashed solid solid; /* 上/右/下/左 */ border-color: #f0f0f0 transparent #e0e0e0 #e0e0e0; }border 简写会重置圆角和图像边框
很多人没意识到：border 简写不仅影响 border-width、border-style、border-color，还会把 border-radius 和 border-image 相关属性重置为初始值。
立即学习“前端免费学习笔记（深入）”；
- 执行
border: 2px solid red后，之前设的border-radius: 4px依然生效（因为border-radius不属于border简写管辖范围） - 但
border-image-source、border-image-slice这些会被清空——它们属于border-image简写体系，和border互不干扰 - 真正危险的是：如果你用过
border: 1px solid #000，再写border-radius: 8px没问题；但若中间穿插了border: none，它不会动border-radius，这点倒很守规矩
实际项目里最容易漏掉的是「颜色未显式声明导致继承父级文字色」，尤其在深色模式切换时，border: 1px solid 会变成 border: 1px solid currentColor，而 currentColor 此刻可能是白色或黑色，结果边框突然消失或变刺眼。