border property - CSS Reference

Definition and Usage

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 properties and even the margin and padding shorthand properties accept up to four values, allowing to set different width, style or color, for the different border edges, this property only accepts one value for each property, leading to the same border for all four edges.

Initial the concatenation of the initial values of its longhand properties:
- border-width: the concatenation of the initial values of its longhand properties:
  - border-top-width: medium
  - border-right-width: medium
  - border-bottom-width: medium
  - border-left-width: medium
- border-style: the concatenation of the initial values of its longhand properties:
  - border-top-style: none
  - border-right-style: none
  - border-bottom-style: none
  - border-left-style: none
- border-color: the concatenation of the initial values of its longhand properties:
  - border-top-color: currentColor
  - border-right-color: currentColor
  - border-bottom-color: currentColor
  - border-left-color: currentColor
Applies to all elements
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 rgb(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 rgb(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 rgb(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 rgb(0,0,0).
Animatable as each of the properties of the shorthand:
- border-color: as each of the properties of the shorthand:
  - border-bottom-color: yes, as a color
  - border-left-color: yes, as a color
  - border-right-color: yes, as a color
  - border-top-color: yes, as a color
- border-style: no
- border-width: as each of the properties of the shorthand:
  - border-bottom-width: yes, as a length
  - border-left-width: yes, as a length
  - border-right-width: yes, as a length
  - border-top-width: yes, as a length
Canonical order order of appearance in the formal grammar of the values

Syntax

Formal syntax:  <br-width> || <br-style> || <color>

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.

Examples

element { border: dashed }          /* dashed border of medium thickness, the same color as the text */
element { border: dotted 1.5em }    /* dotted, 1.5em thick border, the same color as the text */
element { border: solid red }       /* solid, red border of medium thickness */
element { border: solid blue 10px } /* solid, blue border of 10px thickness */
element { border: 1px solid black } /* solid, black border of 1px thickness */