border-width

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

尝试一下

构成属性

语法

css
/* 关键字值 */
border-width: thin;
border-width: medium;
border-width: thick;

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

/* 顶部和底部 | 左侧和右侧 */
border-width: 2px 1.5em;

/* 顶部 | 左侧和右侧 | 底部 */
border-width: 1px 2em 1.5cm;

/* 顶部 | 右侧 | 底部 | 左侧 */
border-width: 1px 2em 0 4rem;

/* 全局值 */
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 这一模式,并且这些值在同一文档中是恒定的。

形式定义

初始值该简写所对应的每个属性:
适用元素所有元素. It also applies to ::first-letter.
是否是继承属性
计算值该简写所对应的每个属性:
动画类型该简写所对应的每个属性:

形式语法

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

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

示例

值与 length 的混合

HTML

html
<p id="one-value">一个值:四边均有 6px 的边框宽度。</p>
<p id="two-values">
  两个不同的值:顶部和底部边框宽 2px,右侧和左侧边框宽 10px。
</p>
<p id="three-values">
  三个不同的值:顶部为 0.3em,底部为 9px,右侧和左侧的宽度为零。
</p>
<p id="four-values">
  四个不同的值:顶部为“thin”,右侧为“medium”,底部为“thick”,左侧为 1em。
</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;
}

结果

规范

Specification
CSS Backgrounds and Borders Module Level 3
# the-border-width

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
border-width

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

参见