border-width

border-width 简写 CSS 属性设置元素边框的宽度。

试一试

组成属性

此属性是以下 CSS 属性的简写形式

语法

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

/* <length> values */
border-width: 4px;
border-width: 1.2rem;

/* top and bottom | left and right */
border-width: 2px 1.5em;

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

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

/* Global values */
border-width: inherit;
border-width: initial;
border-width: revert;
border-width: revert-layer;
border-width: unset;

border-width 属性可以使用一个、两个、三个或四个值来指定。

  • 当指定一个值时，它将相同的宽度应用于所有四个边。
  • 当指定两个值时，第一个宽度应用于顶部和底部，第二个宽度应用于左侧和右侧。
  • 当指定三个值时，第一个宽度应用于顶部，第二个宽度应用于左侧和右侧，第三个宽度应用于底部。
  • 当指定四个值时，宽度将按此顺序（顺时针）应用于顶部、右侧、底部和左侧。

值

<line-width>

定义边框的宽度，可以是显式的非负 <length> 或关键字。如果是关键字，则必须是以下值之一

  • thin
  • medium
  • thick

注意：由于规范没有定义每个关键字表示的确切厚度，因此使用其中一个关键字时的精确结果是特定于实现的。但是，它们始终遵循模式thin ≤ medium ≤ thick，并且值在单个文档中是恒定的。

正式定义

初始值与简写形式的每个属性相同
应用于所有元素。它也应用于 ::first-letter。
继承否
计算值与简写形式的每个属性相同
动画类型与简写形式的每个属性相同

正式语法

border-width = 
  <line-width>{1,4}  

<line-width> = 
  <length [0,∞]>  |
  thin            |
  medium          |
  thick

示例

值的混合和长度

HTML

html
<p id="one-value">one value: 6px wide border on all 4 sides</p>
<p id="two-values">
  two different values: 2px wide top and bottom border, 10px wide right and left
  border
</p>
<p id="three-values">
  three different values: 0.3em top, 9px bottom, and zero width right and left
</p>
<p id="four-values">
  four different values: "thin" top, "medium" right, "thick" bottom, and 1em
  left
</p>

CSS

css
#one-value {
  border: ridge #ccc;
  border-width: 6px;
}
#two-values {
  border: solid red;
  border-width: 2px 10px;
}
#three-values {
  border: dotted orange;
  border-width: 0.3em 0 9px;
}
#four-values {
  border: solid lightgreen;
  border-width: thin medium thick 1em;
}
p {
  width: auto;
  margin: 0.25em;
  padding: 0.25em;
}

结果

规范

规范
CSS 背景和边框模块级别 3
# the-border-width

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅