border-top

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

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

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

Syntax

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.

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>

示例

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

技术说明

Specification Status Comment
CSS Backgrounds and Borders Module Level 3
border-top
Candidate Recommendation 通过修改border-top-color的值,没有直接的更改。
CSS Level 2 (Revision 1)
border-top
Recommendation 没有明显改变
CSS Level 1
border-top
Recommendation 初次定义

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
border-topChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 4Opera Full support 3.5Safari Full support 1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 14Safari iOS Full support 1Samsung Internet Android Full support 1.0

Legend

Full support  
Full support