边框宽度 | border-width

border-width

border-width属性是对元素边框的四个侧面设置宽度的速记属性：border-top-width，border-right-width，border-bottom-width，和border-left-width。

/* Keyword values */
border-width: thin;
border-width: medium;
border-width: thick;

/* <length> values */border-width: 4px;
border-width: 1.2rem;
/* vertical | horizontal */
border-width: 2px 1.5em;

/* top | horizontal | bottom */
border-width: 1px 2em 1.5cm;

/* top | right | bottom | left */
border-width: 1px 2em 0 4rem;

/* Global keywords */
border-width: inherit;
border-width: initial;
border-width: unset;

初始值	as each of the properties of the shorthand: border-top-width: medium border-right-width: medium border-bottom-width: medium border-left-width: medium
适用元素	all elements. It also applies to ::first-letter.
是否是继承属性	no
适用媒体	visual
计算值	as each of the properties of the shorthand: border-bottom-width: the absolute length or 0 if border-bottom-style is none or hidden border-left-width: the absolute length or 0 if border-left-style is none or hidden border-right-width: the absolute length or 0 if border-right-style is none or hidden border-top-width: 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-width: a length border-left-width: a length border-right-width: a length border-top-width: a length
正规顺序	the unique non-ambiguous order defined by the formal grammar

border-top-width：medium

border-right-width：medium

border-bottom-width：medium

border-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或hidden

border-left-width：绝对长度或0如果border-left-style是none或hidden

border-right-width：绝对长度或0如果border-right-style是none或hidden

border-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-width: 6px;
}
#bival {
  border: solid red;
  border-width: 2px 10px;
}
#treval {
  border: dotted orange;
  border-width: 0.3em 0 9px;
}
#fourval {
  border: solid lightgreen;
  border-width: thin medium thick 1em;
}
p {
  width: 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