border-bottom-width

在此页

句法
形式定义
形式句法
范例
规范
浏览器兼容性
另请参阅
相关话题

border-bottom-width CSS property sets the width of the bottom border of an element.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

句法

/* Keyword values */
border-bottom-width: thin;
border-bottom-width: medium;
border-bottom-width: thick;
/* <length> values */
border-bottom-width: 10em;
border-bottom-width: 3vmax;
border-bottom-width: 6px;
/* Global keywords */
border-bottom-width: inherit;
border-bottom-width: initial;
border-bottom-width: unset;

值

<line-width>

Defines the width of the border, either as an explicit nonnegative


<length>

or a keyword. If it's a keyword, it must be one of the following values:

`thin`		A thin border
`medium`		A medium border
`thick`		A thick border

注意： Because the specification doesn't define the exact thickness denoted by each keyword, the precise result when using one of them is implementation-specific. Nevertheless, they always follow the pattern thin ≤ medium ≤ thick , and the values are constant within a single document.

形式定义

初始值	`medium`
适用于	所有元素。它还适用于 `::first-letter` .
继承	no
计算值	the absolute length or `0` if `border-bottom-style` is `none` or `hidden`
动画类型	a length

形式句法

<line-width>where 
<line-width> = <length> | thin | medium | thick

范例

Comparing bottom border widths

HTML

<div>Element 1</div>
<div>Element 2</div>

CSS

div {
  border: 1px solid red;
  margin: 1em 0;
}
div:nth-child(1) {
  border-bottom-width: thick;
}
div:nth-child(2) {
  border-bottom-width: 2em;
}

结果

规范

规范	状态	注释
CSS Backgrounds and Borders Module Level 3 The definition of 'border-bottom-width' in that specification.	候选推荐	No significant change.
CSS Level 2 (Revision 1) The definition of 'border-bottom-width' in that specification.	推荐	No significant change.
CSS Level 1 The definition of 'border-bottom-width' in that specification.	推荐	初始定义。

浏览器兼容性

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`border-bottom-width`	Chrome 完整支持 1	Edge 完整支持 12	Firefox 完整支持 1	IE 完整支持 4	Opera 完整支持 3.5	Safari 完整支持 1	WebView Android 完整支持 2.3	Chrome Android 完整支持 18	Firefox Android 完整支持 4	Opera Android 完整支持 10.1	Safari iOS 完整支持 1	Samsung Internet Android 完整支持 1.0

图例

完整支持

另请参阅

The other border-width-related CSS properties: border-left-width , border-right-width , border-top-width ，和 border-width .
The other border-bottom-related CSS properties: border , border-bottom , border-bottom-style ，和 border-bottom-color .

元数据

最后修改： Aug 22, 2020

在此页

句法

值