边框宽度 | 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;

• 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 ≤ 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;
}

结果

规范

浏览器兼容性

另见

• 边界相关的简写属性：border，border-style，border-color

• 边框宽度相关的属性：border-bottom-width，border-left-width，border-right-width，border-top-width