W3cubDocs

/CSS

border

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 value	as each of the properties of the shorthand: `border-width`: as each of the properties of the shorthand: `border-top-width`: `medium` `border-right-width`: `medium` `border-bottom-width`: `medium` `border-left-width`: `medium` `border-style`: as each of the properties of the shorthand: `border-top-style`: `none` `border-right-style`: `none` `border-bottom-style`: `none` `border-left-style`: `none` `border-color`: as each of the properties of the shorthand: `border-top-color`: `currentcolor` `border-right-color`: `currentcolor` `border-bottom-color`: `currentcolor` `border-left-color`: `currentcolor`
Applies to	all elements. It also applies to `::first-letter`.
Inherited	no
Media	visual
Computed value	as each of the properties of the shorthand: `border-width`: as each of the properties of the shorthand: `border-bottom-width`: the absolute length or `0` if `border-bottom-style` is `none` or `hidden` `border-left-width`: the absolute length or `0` if `border-left-style` is `none` or `hidden` `border-right-width`: the absolute length or `0` if `border-right-style` is `none` or `hidden` `border-top-width`: the absolute length or `0` if `border-top-style` is `none` or `hidden` `border-style`: as each of the properties of the shorthand: `border-bottom-style`: as specified `border-left-style`: as specified `border-right-style`: as specified `border-top-style`: as specified `border-color`: as each of the properties of the shorthand: `border-bottom-color`: computed color `border-left-color`: computed color `border-right-color`: computed color `border-top-color`: computed color
Animation type	as each of the properties of the shorthand: `border-color`: as each of the properties of the shorthand: `border-bottom-color`: a color `border-left-color`: a color `border-right-color`: a color `border-top-color`: a color `border-style`: discrete `border-width`: as each of the properties of the shorthand: `border-bottom-width`: a length `border-left-width`: a length `border-right-width`: a length `border-top-width`: a length
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. 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

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