border

概览

CSS的border属性是一个用于设置各种单独的边界属性的简写属性border可以用于设置一个或多个以下属性的值: border-width, border-style, border-color

和所有的简写属性一样,如果有缺省值会被设置成对应属性的初始值。同时需要注意设置border对border-image属性的影响,虽然border属性不能设置这个属性,但会把该属性重置为初始值none。这使得我们可以用border属性去重置整个样式表中的border设置。因为W3C计划在未来的标准中保留该属性,因此建议使用该属性重置边框设定。

注意: 虽然border-width,、border-styleborder-color 简写属性接受最多4个参数来为不同的边设置宽度、风格和颜色,但boder属性只接受三个参数,分别是宽度、风格和颜色,所以这样会使得四条边的边框相同。

Borders vs. outlines

边界border和轮廓outline很相似。然而轮廓在以下方面与边界不同

  • 轮廓不占据空间,他们在元素内容之外绘制
  • 根据规范,轮廓不必为矩形,尽管通常是矩形。

语法

/* style */
border: solid;

/* width | style */
border: 2px dotted;

/* style | color */
border: outset #f33;

/* width | style | color */
border: medium dashed green;

/* Global values */
border: inherit;
border: initial;
border: unset;

可以使用下面列出的一个,两个或三个值来指定border属性。 值的顺序无关紧要。

注意:如果边框的样式未定义,它将不可见。 这是因为样式默认为none。

取值

border-width
请看 border-width.
border-style 
请看 border-style.
border-color 
<color> 可以确定border的颜色。如果这个值没有设置,它的默认值是元素的color属性值(是文字颜色而非背景色)。 请看border-color.

正式语法

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

示例

HTML

<div>I have a border, an outline, AND a box shadow! Amazing, isn't it?</div>

CSS

div {
  border: 0.5rem outset pink;
  outline: 0.5rem solid khaki;
  box-shadow: 0 0 0 2rem skyblue;
  border-radius: 12px;
  font: bold 1rem sans-serif;
  margin: 2rem;
  padding: 1rem;
  outline-offset: 0.5rem;
}

结果

规范

规范 状态 说明
CSS Backgrounds and Borders Module Level 3
border
Candidate Recommendation 在理论上删除了对transparent的支持,因为<color>已经接受它作为一种有效的颜色值。这不会对实际使用有任何影响。
虽然border不能给border-image赋特定的值,但可以用于重置border-image为初始值(none).
CSS Level 2 (Revision 1)
border
Recommendation

加入inherit关键字。
接受transparent作为有效的颜色值。

CSS Level 1
border
Recommendation 初始定义

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
borderChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 4Opera Full support 3.5Safari Full support 1WebView Android Full support ≤37Chrome 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