border-color property - CSS Reference

Definition and Usage

The border-color CSS property is a shorthand for setting the color of the four sides of an element's border: border-top-color, border-right-color, border-bottom-color, border-left-color

Initial 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-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-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
Canonical order the unique non-ambiguous order defined by the formal grammar

Syntax

Formal syntax: <color>{1,4}

border-color:  color                 /* one-value syntax */
border-color:  horizontal vertical   /* two-value syntax */
border-color:  top vertical bottom   /* three-value syntax */
border-color:  top right bottom left /* four-value syntax */
border-color:  inherit

Values

color: Is a <color> denoting the color to apply to all four edges. It is used only in the one-value syntax.
horizontal: Is a <color> denoting the color to apply to all horizontal edges, that is the top and bottom edges. It is used only in the two-value syntax.
vertical: Is a <color> denoting the color to apply to all vertical edges, that is the right and left edges. It is used only in the two- and three-value syntaxes.
top: Is a <color> denoting the color to apply to the top edge. It is used only in the three- and four-value syntaxes.
bottom: Is a <color> denoting the color to apply to the bottom edge. It is used only in the three- and four-value syntaxes.
right: Is a <color> denoting the color to apply to the top edge. It is used only in the four-value syntax.
left: Is a <color> denoting the color to apply to the top edge. It is used only in the four-value syntax.
inherit: Is a keyword indicating that all four values are inherited from their parent's element calculated value.

Examples

HTML Content

<div id="example_border_box">
<p>This is a box with a border around it.</p>
</div>

CSS Content

#example_border_box {
  border-style: ridge dashed solid;
  /* Equivalent to:
     border-top-style: ridge;
     border-right-style: dashed;
     border-bottom-style: solid;
     border-left-style: dashed;
  */
  border-color: orange blue;
  /* Equivalent to:
     border-top-color: orange;
     border-right-color: blue;
     border-bottom-color: orange;
     border-left-color: blue;
  */
}