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;
*/
}

Compatibility

Desktop browsers

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)

Mobile browsers

Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support NA 1.0 (1.9.2) NA NA NA

Relative articles