边框宽度 | border-width (Backgrounds & Borders) - CSS 中文开发手册
border-width属性是对元素边框的四个侧面设置宽度的速记属性：border-top-width，border-right-width，border-bottom-width，和border-left-width。
/* Keyword values */ border- thin; border- medium; border- thick; /* <length> values */border- 4px; border- 1.2rem; /* vertical | horizontal */ border- 2px 1.5em; /* top | horizontal | bottom */ border- 1px 2em 1.5cm; /* top | right | bottom | left */ border- 1px 2em 0 4rem; /* Global keywords */ border- inherit; border- initial; border- unset;
| 初始值 | as each of the properties of the shorthand: border-top- medium border-right- medium border-bottom- medium border-left- medium |
|---|---|
| 适用元素 | all elements. It also applies to ::first-letter. |
| 是否是继承属性 | no |
| 适用媒体 | visual |
| 计算值 | as each of the properties of the shorthand: border-bottom- the absolute length or 0 if border-bottom-style is none or hidden border-left- the absolute length or 0 if border-left-style is none or hidden border-right- the absolute length or 0 if border-right-style is none or hidden border-top- the absolute length or 0 if border-top-style is none or hidden |
| Animation type | as each of the properties of the shorthand: border-bottom- a length border-left- a length border-right- a length border-top- a length |
| 正规顺序 | the unique non-ambiguous order defined by the formal grammar |
border-top-width：mediumborder-right-width：mediumborder-bottom-width：mediumborder-left-width：medium
Applies to all elements. It also applies to [`::first-letter`](::first-letter). [Inherited](inheritance) no Media visual [Computed value](computed_value) as each of the properties of the shorthand:
border-bottom-width：绝对长度或0如果border-bottom-style是none或hiddenborder-left-width：绝对长度或0如果border-left-style是none或hiddenborder-right-width：绝对长度或0如果border-right-style是none或hiddenborder-top-width：绝对长度或0如果border-top-style是none或hidden
Animation type as each of the properties of the shorthand:
border-bottom-width：长度border-left-width：长度border-right-width：长度border-top-width：长度
Canonical order the unique non-ambiguous order defined by the formal grammar
语法
该border-width属性可以使用一个，两个，三个或四个值来指定。
当指定一个值时，它将在所有四条边上应用相同的宽度。当指定两个值时，第一个宽度适用于顶部和底部，第二个适用于左侧和右侧。当指定三个值时，第一个宽度适用于顶部，第二个适用于左侧，第三个适用于底部。当指定四个值时，宽度按顺序应用于顶部，右侧，底部和左侧（顺时针）。
值
<br-width>定义边界的宽度，可以是明确的非负值<length>或关键字。如果是关键字，则必须是以下值之一：
| thin | | A thin border |
|---|---|---|
| medium | | A medium border |
| thick | | A thick border |
注意：由于规范没有定义每个关键字所表示的精确厚度，因此使用其中一个关键字的精确结果是特定于实现的。尽管如此，它们总是遵循这个模式thin ≤ medium ≤ thick，价值在一个单一的文件中是不变的。
正式语法
<br-width>{1,4}where
<br-width> = <length> | thin | medium | thick 示例
值和长度的混合
HTML
<p id="sval"> one value: 6px wide border on all 4 sides</p> <p id="bival"> two different values: 2px wide top and bottom border, 10px wide right and left border</p> <p id="treval"> three different values: 0.3em top, 9px bottom, and zero width right and left</p> <p id="fourval"> four different values: "thin" top, "medium" right, "thick" bottom, and 1em right</p>
CSS
#sval {
border: ridge #ccc;
border- 6px;
}
#bival {
border: solid red;
border- 2px 10px;
}
#treval {
border: dotted orange;
border- 0.3em 0 9px;
}
#fourval {
border: solid lightgreen;
border- thin medium thick 1em;
}
p {
auto;
margin: 0.25em;
padding: 0.25em;
} 结果
规范
| Specification | Status | Comment |
|---|---|---|
| CSS Backgrounds and Borders Module Level 3The definition of 'border-width' in that specification. | Candidate Recommendation | No direct change, the <length> CSS data type extension has an effect on this property. |
| CSS Level 2 (Revision 1)The definition of 'border-width' in that specification. | Recommendation | Added the constraint that values' meaning must be constant inside a document. |
| CSS Level 1The definition of 'border-width' in that specification. | Recommendation | Initial definition. |
浏览器兼容性
| Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic Support | 1 | (Yes) | 1 | 4 | 3.5 | 1 |
| Feature | Android | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
|---|---|---|---|---|---|---|---|
| Basic Support | 2 | ? | (Yes) | 1 | 6 | 11 | 3 |
另见
边界相关的简写属性：border，border-style，border-color 边框宽度相关的属性：border-bottom-width，border-left-width，border-right-width，border-top-width
CSS 中文开发手册