border-top

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是属性 border-top-color, border-top-style, 和border-top-width 的三者的缩写。这些属性都是在描述一个元素的上方的边框border

尝试一下

与所有缩写属性(shorthand properties)一样,border-top始终设置它可以设置的所有属性的值,即使未指定它们也是如此。它将未指定的那些设置为其默认值。这意味着

css
border-top-style: dotted;
border-top: thick green;

和下面的代码效果相同:

css
border-top-style: dotted;
border-top: none thick green;

border-top前指定的border-top-style将会失效。因为border-top-style 默认值为none,故没有边界即没有指定border-style

Syntax

css
border-top: 1px;
border-top: 2px dotted;
border-top: medium dashed green;

这三种属性值的缩写需要按照顺序定义数值,也可以省略其中的一个或者两个。

Values

形式语法

border-top = 
<line-width> ||
<line-style> ||
<color>

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

<line-style> =
none |
hidden |
dotted |
dashed |
solid |
double |
groove |
ridge |
inset |
outset

示例

html
<div>This box has a border on the top side.</div>
css
div {
  border-top: 4px dashed blue;
  background-color: gold;
  height: 100px;
  width: 100px;
  font-weight: bold;
  text-align: center;
}

规范

Specification
CSS Backgrounds and Borders Module Level 3
# border-shorthands

浏览器兼容性

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

Legend

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

Full support
Full support