Your Search Results

border

In This Article

Summary
Syntax
1. Values
2. Formal syntax
Examples
Specifications
Browser compatibility
See also

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: `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`: If the value is translucent, the computed value will be the `rgba()` corresponding one. If it isn't, it will be the `rgb()` corresponding one. The `transparent` keyword maps to `rgba(0,0,0,0)`. `border-left-color`: If the value is translucent, the computed value will be the `rgba()` corresponding one. If it isn't, it will be the `rgb()` corresponding one. The `transparent` keyword maps to `rgba(0,0,0,0)`. `border-right-color`: If the value is translucent, the computed value will be the `rgba()` corresponding one. If it isn't, it will be the `rgb()` corresponding one. The `transparent` keyword maps to `rgba(0,0,0,0)`. `border-top-color`: If the value is translucent, the computed value will be the `rgba()` corresponding one. If it isn't, it will be the `rgb()` corresponding one. The `transparent` keyword maps to `rgba(0,0,0,0)`.
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

border: 1px;
border: 2px dotted;
border: medium dashed green;

Values

<br-width>: Default value medium is used if absent. See border-width.
<br-style>: Default value none is used if absent. See border-style.
<color>: A <color> denoting the color of the border. If not set, its default value is the value of the element's color property (the text color, not the background color). 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( <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

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

	Desktop Browsers					Mobile Browsers
	Chrome for Desktop	Firefox for Desktop	Internet Explorer for Desktop	Opera for Desktop	Safari for Desktop	Firefox for Android	Safari for iOS
Basic Support	1.0Full support	1.0Full support	4.0Full support	3.5Full support	1.0Full support	1.0Full support	1.0Full support

Legend

Full support: Full support

Document Tags and Contributors

Tags:

Contributors to this page: 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, Rappo

Last updated by: Sebastianz, Jun 28, 2016, 7:21:18 AM