border-width 本身不能单独显示边框，必须配合 border-style 和 border-color（或使用 border 简写）才能生效；支持像素值、相对单位及 thin/medium/thick 关键字，但后者像素不固定；推荐用 border 简写确保完整定义，响应式场景宜用 box-shadow 或 clamp() 替代固定像素。
用 border-width 直接设置边框粗细
HTML5 本身不提供边框控制能力，真正起作用的是 CSS。调整边框粗细最直接的方式是给元素设置 border-width 属性，它接受具体像素值、相对单位（如 em）或关键字（thin / medium / thick）。
注意：仅设置 border-width 不会显示边框——必须同时声明 border-style（比如 solid）和 border-color（或使用简写 border），否则边框不可见。
-
border-width可以取单个值（四边统一），如2px - 也可取多个值实现差异化，如
1px 2px 3px 4px（上右下左） - 关键字值（
thin/medium/thick）实际像素取决于浏览器，默认通常为 1px / 3px / 5px，但不建议依赖，因为不可控
用 border 简写一次性定义粗细、样式和颜色
更常用也更稳妥的做法是使用 border 简写属性，它能同时设定宽度、样式和颜色，避免遗漏导致边框不显示。
语法顺序固定：「宽度」+「样式」+「颜色」，任意一项缺失都会让整个声明失效（例如只写 border: 2px #333 是无效的，缺了 style）。
立即学习“前端免费学习笔记（深入）”；
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
div {
border: 2px solid #ccc;
}
也可以分别控制某一边：
div {
border-top: 3px dashed red;
border-bottom: 1px dotted #666;
}
响应式场景下慎用固定像素值
在移动端或缩放频繁的页面中，硬写 1px 边框可能在高 DPI 屏幕上显得过粗（如 retina 屏实际渲染为 2 物理像素），而用 0.5px 又存在兼容性问题（旧版 Safari 不支持）。
- 现代方案可用
transform: scaleY(0.5)配合border-top模拟 0.5px 效果，但仅适用于单边 - 更稳妥的是用
box-shadow替代：例如box-shadow: 0 0 0 0.5px #000，兼容性更好 - 如果必须用
border-width做响应式，可结合媒体查询或clamp()：如border-width: clamp(1px, 0.1vw, 2px)
常见错误：边框没出来，其实是这三个地方漏了
调试时发现加了 border-width 却没边框，大概率不是语法错，而是以下三处之一没配齐：
- 没设
border-style（none是默认值，等于没边框） - 没设
border-color（透明色或未声明时，部分浏览器会当currentcolor处理，但不可靠） - 父容器或自身设置了
overflow: hidden且边框在裁剪区外（比如负 margin 拉出的边框被截断）
最省事的排查方式：直接换用 border: 2px solid currentColor，看是否立刻出现——如果出现了，说明原写法里漏了 style 或 color。
