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.
Please take two minutes to fill out our short survey.
CSS 属性 border-top是属性 border-top-color, border-top-style, 和border-top-width 的三者的缩写。这些属性都是在描述一个元素的上方的边框border。
尝试一下
border-top: solid;
border-top: dashed red;
border-top: 1rem solid;
border-top: thick double #32a1ce;
border-top: 4mm ridge rgba(211, 220, 50, 0.6);
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
This is a box with a border around it.
</div>
</section>
#example-element {
background-color: #eee;
color: #8b008b;
padding: 0.75em;
width: 80%;
height: 100px;
}
与所有缩写属性（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
<br-width>-
请参阅
border-top-width. <br-style>-
请参阅
border-top-style. <color>-
请参阅
border-top-color.
形式语法
示例
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 |