border-top

CSS属性 border-top是属性 border-top-color, border-top-style, 和border-top-width 的三者的缩写。这些属性都是在描述一个元素的上方的边框border。

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

和CSS所有的缩写属性一样，border-top 总是会设置该缩写属性所包含的全部属性值，即使开发者并没有一一指定这些值。CSS缩写属性会给没有被定义的属性一个默认的属性值。那就意味着下面这个例子......

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

......实际上应该是下面这个样子......

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

......并且在 border-top之前定义的 border-top-style 的值也会被覆盖。由于 border-top-style 的默认值是 none, border-style的最终结果就是没有边框。

初始值	as each of the properties of the shorthand: `border-top-width`: `medium` `border-top-style`: `none` `border-top-color`: `currentcolor`
适用元素	all elements. It also applies to `::first-letter`.
是否是继承属性	否
适用媒体	visual
计算值	as each of the properties of the shorthand: `border-top-width`: the absolute length or `0` if `border-top-style` is `none` or `hidden` `border-top-style`: as specified `border-top-color`: computed color
Animation type	as each of the properties of the shorthand: `border-top-color`: a color `border-top-style`: discrete `border-top-width`: a length
正规顺序	order of appearance in the formal grammar of the values

Syntax

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

Values

<br-width>: 请参阅 border-top-width.
<br-style>: 请参阅 border-top-style.
<color>: 请参阅 border-top-color.

Formal syntax

<line-width> || <line-style> || <color>where 
<line-width> = <length> | thin | medium | thick
<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
where 
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )
where 
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

Example

<div>
  This box has a border on the top side.
</div>

div {
  border-top: 4px dashed blue;
  background-color: gold;
  height: 100px;
  width: 100px;
  font-weight: bold;
  text-align: center;
}

Specifications

Specification	Status	Comment
CSS Backgrounds and Borders Module Level 3 border-top	Candidate Recommendation	No direct changes, though the modification of values for the `border-top-color` do apply to it.
CSS Level 2 (Revision 1) border-top	Recommendation	No significant changes.
CSS Level 1 border-top	Recommendation	Initial definition.

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Desktop
Mobile

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	1.0	(Yes)	1.0 (1.7 or earlier)	4	3.5	1.0 (85)

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	1.0	(Yes)	1.0 (1.0)	(Yes)	(Yes)	(Yes)

最后修改：

Mar 23, 2019, by MDN contributors