border-width必须带单位（0除外），border-style是边框渲染的开关，单边设置需包含width、style、color三值，border-radius过大或与border-width不匹配易致渲染异常。
border-width 不能直接写数字，必须带单位
很多人写 border-width: 2; 发现无效，是因为 CSS 规范要求长度值必须有单位（如 px、em、rem），纯数字不被识别。浏览器会直接忽略该声明。
-
border-width: 2px;✅ 有效 -
border-width: medium;✅ 也有效（关键字值） -
border-width: 0;✅ 0 是特例，可省略单位 -
border-width: 2;❌ 无效，会被丢弃
border-style 是边框生效的“开关”
即使设置了 border-width 和 border-color，若 border-style 是默认的 none，边框依然不可见。它不是装饰属性，而是决定边框是否渲染的核心开关。
- 常见可用值：
solid、dashed、dotted、double、hidden -
border: 1px #333;不生效 —— 缺少border-style，等价于border: 1px none #333 - 正确简写：
border: 1px solid #333; - 想临时隐藏边框？用
border-style: hidden;（比none在表格边框折叠时行为更可靠）
单边边框设置别漏掉 style
用 border-top、border-left 等复合属性时，很多人只写宽度和颜色，比如 border-top: 1px #666;，结果边框没出来 —— 原因同上：缺 border-style。
border-top: 1px solid #666; border-right: 2px dashed #999; border-bottom: 0; /* 0 可省单位，且隐含 style: none */ border-left: 3px double; /* ❌ 错误：缺颜色，部分浏览器可能降级渲染 */
推荐写全三值：border-{side}: ；若省略颜色，浏览器按 currentColor 取值，但依赖上下文，容易出错。
立即学习“前端免费学习笔记（深入）”；
border-radius 配合 border 时注意重叠裁剪
当 border-radius 值大于 border-width 时，圆角区域可能出现颜色断层或锯齿，尤其在高缩放或 Retina 屏下。这不是 bug，是抗锯齿与像素对齐共同作用的结果。
- 避免
border-radius: 999px;配border: 1px—— 实际圆角由min(999px, 宽高/2)决定，但过大的值可能干扰某些浏览器的渲染优化 - 圆角 + 实线边框建议用偶数
px值（如4px、8px），减少 subpixel 渲染偏差 - 若边框颜色较浅（如
#eee），圆角处可能显得“发虚”，可加backface-visibility: hidden;或触发硬件加速来缓解
边框看着简单，真正调起来常卡在 border-style 被忽略、单位漏写、或圆角与宽度比例失衡这几个点上。
