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 此刻可能是白色或黑色，结果边框突然消失或变刺眼。