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

css 属性 border-top-width 是用于设置盒模型的上边框的宽度

尝试一下

Syntax

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

/* <length> values */
border-top-width: 10em;
border-top-width: 3vmax;
border-top-width: 6px;

/* Global keywords */
border-top-width: inherit;
border-top-width: initial;
border-top-width: unset;

Values

<br-width>

上边框的宽度属性的有效值要么是一个具体的非负数,要么是一个关键字。如果是关键字,必须是一下几种:

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.

Formal syntax

border-top-width = 
<line-width>

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

Example

HTML

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

CSS

css
div {
  border: 1px solid red;
  margin: 1em 0;
}

div:nth-child(1) {
  border-top-width: thick;
}
div:nth-child(2) {
  border-top-width: 2em;
}

Result

Specifications

Specification
CSS Backgrounds and Borders Module Level 3
# the-border-width
初始值medium
适用元素所有元素. It also applies to ::first-letter.
是否是继承属性
计算值绝对长度;或如果 border-top-style 的值为 nonehidden,则为 0
动画类型a length

Browser compatibility

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-top-width

Legend

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

Full support
Full support

See also