Summary
The border
CSS property is a shorthand property for setting the individual border property values in a single place in the style sheet. border
can be used to set the values for one or more of: border-width
, border-style
, border-color
.
Like all shorthand properties, a missing value for one of the longhand properties is set to the corresponding initial value. Also note that border-image
, though not settable using this shorthand, is reset to its initial value, that is, none
. This allows to use border
to reset any border settings set earlier in the cascade. As the W3C intends to preserve this property in future level of the spec, it is recommended to use this method to reset border settings.
Note: While the border-width
, border-style
, and border-color
shorthand properties accept up to four values, allowing one to set different width, style or color values for the different border edges, this property only accepts a single value for each property, leading to the same border for all four edges.
Initial value | as each of the properties of the shorthand:
|
---|---|
Applies to | all elements. It also applies to ::first-letter . |
Inherited | no |
Media | visual |
Computed value | as each of the properties of the shorthand:
|
Animation type | as each of the properties of the shorthand:
|
Canonical order | order of appearance in the formal grammar of the values |
Syntax
border: 1px; border: 2px dotted; border: medium dashed green;
Values
<br-width>
- Default value
medium
is used if absent. Seeborder-width
. <br-style>
- Default value
none
is used if absent. Seeborder-style
. <color>
- A
<color>
denoting the color of the border. If not set, its default value is the value of the element'scolor
property (the text color, not the background color). Seeborder-color
.
Formal syntax
<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>
Examples
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;
}
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Backgrounds and Borders Module Level 3 The definition of 'border' in that specification. |
Candidate Recommendation | Technically removes the support for transparent as it is now a valid <color> ; this has no practical influence.Though it cannot be set to another value using the shorthand, border does now reset border-image to its initial value (none ). |
CSS Level 2 (Revision 1) The definition of 'border' in that specification. |
Recommendation | Accepts the inherit keyword. Also accepts transparent as a valid color. |
CSS Level 1 The definition of 'border' in that specification. |
Recommendation | Initial definition |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 1.0 | 1.0 (1.7 or earlier) | 4.0 | 3.5 | 1.0 (85) |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | ? | 1.0 (1.9.2) | ? | ? | 1.0 |
See also
border-radius
-related CSS properties:border-top-left-radius
,border-top-right-radius
,border-bottom-right-radius
,border-bottom-left-radius