border

综述

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

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

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

初始值as each of the properties of the shorthand:
适用元素all elements. It also applies to ::first-letter.
是否是继承属性否
适用媒体visual
计算值as each of the properties of the shorthand:
Animation typeas each of the properties of the shorthand:
正规顺序order of appearance in the formal grammar of the values

语法

border: [border-width ||border-style ||border-color |inherit] ;

取值

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

正式语法

<br-width> || <br-style> || <color>
where 
<br-width> = <length> | thin | medium | thick
<br-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( <rgb-component>#{3} )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> )
<hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<named-color> = <ident>
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowText
where 
<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>

示例

HTML

<div class="brd"> look at my borders </div>
<p>you can play with the css below to test properties changes</p>
<style contenteditable>
  .brd { border: 1px solid black;}
</style>

CSS

.brd {
  border: 1px solid black;
}
style {
  border: 1px dashed black;
  display:block;
}

 

结果

规范

规范 状态 说明
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 初始定义

浏览器兼容性

特性 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本支持 1.0 1.0 (1.7 or earlier) 4.0 3.5 1.0 (85)
特性 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本支持 ? 1.0 (1.9.2) ? ? 1.0

 

另见

文档标签和贡献者