border-width

在此页

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

border-width 简写 CSS property sets the width of an element's border.

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.

组成特性

此特性是下列 CSS 特性的简写：

句法

/* 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-width property may be specified using one, two, three, or four values.

When one value is specified, it applies the same width to all four sides .
When two values are specified, the first width applies to the top and bottom , the second to the left and right .
When three values are specified, the first width applies to the top , the second to the left and right , the third to the bottom .
When four values are specified, the widths apply to the top , right , bottom ，和 left in that order (clockwise).

值

<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.

形式定义

初始值	as each of the properties of the shorthand: `border-top-width` : `medium` `border-right-width` : `medium` `border-bottom-width` : `medium` `border-left-width` : `medium`
适用于	所有元素。它还适用于 `::first-letter` .
继承	no
计算值	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`
动画类型	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

形式句法

<line-width>{1,4}where 
<line-width> = <length> | thin | medium | thick

范例

A mix of values and lengths

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 left</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;
}

结果

规范

规范	状态	注释
CSS Backgrounds and Borders Module Level 3 The definition of 'border-width' in that specification.	候选推荐	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.	推荐	Added the constraint that values' meaning must be constant inside a document.
CSS Level 1 The definition of 'border-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-width`	Chrome 完整支持 1	Edge 完整支持 12	Firefox 完整支持 1	IE 完整支持 4	Opera 完整支持 3.5	Safari 完整支持 1	WebView Android 完整支持 2	Chrome Android 完整支持 18	Firefox Android 完整支持 4	Opera Android 完整支持 10.1	Safari iOS 完整支持 3	Samsung Internet Android 完整支持 1.0

图例

完整支持

另请参阅

The border-related shorthand properties: border , border-style , border-color
The border-width-related properties: border-bottom-width , border-left-width , border-right-width , border-top-width

元数据

最后修改： Aug 22, 2020

在此页