边框宽度属性
最后更新：2026-09-13
border-width 边框宽度属性
border-width 用于设置元素边框的粗细程度。可以使用预定义关键字 thin、medium、thick，也可以使用具体的长度值（如 px、em）。该属性作为单独属性使用时，只控制宽度，不影响样式和颜色。
| 分类 | |
|---|---|
| 初始值 | medium |
| 继承 | 否 |
| 适用于 | all |
| 可动画 | length |
| CSS 版本 | CSS1 |
| 状态 | 标准 |
📝 语法
border-width: thin | medium | thick | <length>{1,4};⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
thin | medium | thick | 关键字 | 预定义边框宽度关键字 |
<length> | 类型 | 固定边框宽度值 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| border-width | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| 所有主流浏览器均支持 | |||||
提示： border-width 支持 1~4 个值，分别对应上、右、下、左四条边，写法与 margin、padding 一致。
❓ 常见问题
Qthin、medium、thick 具体是多少像素？
ACSS 规范没有规定这三个关键字对应的精确像素值，由各浏览器自行实现。通常 medium 约为 3~4px（也是默认边框宽度），thin 约为 1px，thick 约为 5~6px。不同浏览器渲染可能略有差异，需要精确控制时请使用具体长度值，如 2px。
Q为什么设置了 border-width 但边框还是不显示？
A因为 border-style 的默认值是 none，样式不存在时宽度再大也不会绘制边框。必须同时设置 border-style（如 solid）以及颜色，三要素齐全边框才会出现。排查顺序：先确认 border-style，再看 border-width 是否为 0，最后检查颜色。
Qborder-width 的 1~4 个值分别代表什么？
A与 margin、padding 的规则完全一致：一个值四条边相同；两个值分别对应上下、左右；三个值对应上、左右、下；四个值按顺时针（上右下左）依次对应。例如 border-width: 2px 4px 表示上下 2px、左右 4px，也可单独用 border-top-width 等属性控制单边。
Qborder-width 支持百分比吗？
A不支持。border-width 只能使用 thin、medium、thick 三个关键字或长度单位（px、em、rem、vw、calc() 等），百分比值会被视为无效声明而被忽略。相对单位 em/rem 会随字体大小缩放，适合响应式场景；需要固定粗细时直接用 px。
🏷️ 相关属性
💡 相关案例
📚 相关教程
