border

In This Article

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;

Usage note: It is recommended to use border when you want to set all border properties simultaneously. While the border-width, border-style, and border-color shorthand properties accept up to four values, allowing you to set different values for each edge, border only accepts a single value for each property. Thus, the same style is applied to all four edges.

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.

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	1.0	(Yes)	1.0 (1.7 or earlier)	4.0	3.5	1.0 (85)

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	?	(Yes)	1.0 (1.9.2)	?	?	1.0

Document Tags and Contributors

Tags:

Contributors to this page: mfluehr, stephaniehobson, wbamberg, erikadoyle, Sebastianz, SphinxKnight, fscholz, renoirb, jswisher, teoli, technoAri, dagolinuxoid, stevemao, George8211, jsx, SiddharthBhatt, codepo8, gorhgorh, andRyanMiller, Frungi, kscarfone, GKFX, Sheppy, FredB, brebory, parthiv, Spawnm, ethertank, trevorh, suhajdab, Pbb, vikashagrawal1990, Yuichiro, Rowno, Jürgen Jeka, Nathymig, BijuGC, Mgjbot, Ptak82, Nickolay, Qazzian, RedFlames, Dria, alecananian

Last updated by: mfluehr, Jun 27, 2017, 9:59:26 AM