The border
CSS property is a shorthand property for setting all individual border property values at once: border-width
, border-style
, and border-color
. As with all shorthand properties, any individual value that is not specified is set to its corresponding initial value. Importantly, border
cannot be used to specify a custom value for border-image
, but instead sets it to its initial value, i.e., none
.
border: 1px; border: 2px dotted; border: medium dashed green;
<div class="row"> <div class="cell"> <div class="border b1">border: 1px;</div> </div> <div class="cell"> <div class="border b2">border: 2px dotted;</div> </div> <div class="cell"> <div class="border b3">border: medium dashed green;</div> </div> </div>
html,body { height: 100%; box-sizing: border-box; } .row { width: 100%; height: 100%; display: flex; background: #EEE; } .cell { flex: 1 auto; white-space: nowrap; margin: .5em; padding: .5em; background-color: #FFF; font: 1em monospace; overflow: hidden; } @media (max-width: 33em) { .row { flex-direction: column; } } .border { padding: .5em; height: 100%; box-sizing: border-box; } .b1 { border: 1px; } .b2 { border: 2px dotted; } .b3 { border: medium dashed green; }
It is recommended that you use border
when you want to set all border properties to the same value. However, if you need to set different borders with different property values, you will need to use the longhand border-width
, border-style
, and border-color
properties, which each accept up to four values. That lets you set different values for each edge, while border
, which only accepts one set of border property values, applies the same values to every side of the element.
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
The border
property is specified using one or more of the <br-width>
, <br-style>
, and <color>
values listed below.
Values
<br-width>
- Thickness of the border. Defaults to
medium
if absent. Seeborder-width
. <br-style>
- Line style of the border. Defaults to
none
if absent. Seeborder-style
. <color>
- Color of the border. Defaults to the value of the element's
color
property. 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( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<rgba()> = rgba( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
where
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
Examples
HTML
<div class="fun-border">Look at my borders.</div> <p>You can edit the CSS below to experiment with border styles!</p> <style contenteditable> .fun-border { border: 2px solid red; } </style>
CSS
style {
display: block;
border: 1px dashed black;
}
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Backgrounds and Borders Module Level 3 The definition of 'border' in that specification. |
Candidate Recommendation | Removes specific support for transparent , as it is now a valid <color> ; this has no practical impact.Though it cannot be set to a custom value using the shorthand, border now resets 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 | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 1 | Yes | 1 | 4 | 3.5 | 1 |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic support | ? | ? | Yes | 4 | ? | ? | 1 |
See also
border-radius
-related CSS properties:border-top-left-radius
,border-top-right-radius
,border-bottom-right-radius
,border-bottom-left-radius