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;

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 valueas each of the properties of the shorthand:
Applies toall elements. It also applies to ::first-letter.
Inheritedno
Mediavisual
Computed valueas each of the properties of the shorthand:
Animation typeas each of the properties of the shorthand:
Canonical orderorder 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. See border-width.
<br-style>
Line style of the border. Defaults to none if absent. See border-style.
<color>
Color of the border. Defaults to the value of the element's color property. See border-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

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic Support1 (Yes)143.51
FeatureAndroidChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Basic Support ? ? (Yes)1 ? ?1

See also