Summary

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 value 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. It also applies to ::first-letter.
  • 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 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).
  • 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

/* border-color: color */ 
border-color: red;

/* border-color: horizontal vertical */
border-color: red #f015ca;

/* border-color: top horizontal bottom */
border-color: red yellow green;

/* border-color: top right bottom left */
border-color: red yellow green blue;

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.

Formal syntax

<color>{1,4}

Examples

Complete border-color usage

HTML Content

<div id="justone">
    <p><code>border-color: red;</code> is equivalent to</p>
    <ul><li><code>border-top-color: red;</code></li>
       <li><code>border-right-color: red;</code></li>
       <li><code>border-bottom-color: red;</code></li>
       <li><code>border-left-color: red;</code></li>
    </ul>
</div>
<div id="horzvert">
    <p><code>border-color: gold red;</code> is equivalent to</p>
    <ul><li><code>border-top-color: gold;</code></li>
       <li><code>border-right-color: red;</code></li>
       <li><code>border-bottom-color: gold;</code></li>
       <li><code>border-left-color: red;</code></li>
    </ul>
</div>
<div id="topvertbott">
    <p><code>border-color: red cyan gold;</code> is equivalent to</p>
    <ul><li><code>border-top-color: red;</code></li>
        <li><code>border-right-color: cyan;</code></li>
        <li><code>border-bottom-color: gold;</code></li>
        <li><code>border-left-color: cyan;</code></li>
    </ul>
</div>
<div id="trbl">
    <p><code>border-color: cyan black gold;</code> is equivalent to</p>
    <ul><li><code>border-top-color: red;</code></li>
        <li><code>border-right-color: cyan;</code></li>
        <li><code>border-bottom-color: black;</code></li>
        <li><code>border-left-color: gold;</code></li>
    </ul>
</div>

CSS Content

#justone {
    border-color: red;
}
#horzvert {
    border-color: gold red;
}
#topvertbott {
    border-color: red cyan gold;
}
#trbl {
    border-color: red cyan black gold;
}

/* Set width and style for all divs */
div {
    border: solid 0.3em;
    width: auto;
    margin: 0.5em;
    padding: 0.5em;
}
ul {
    margin: 0;
    list-style: none;
}

Result

Specifications

Specification Status Comment
CSS Backgrounds and Borders Module Level 3
The definition of 'border-color' in that specification.
Candidate Recommendation The transparent keyword has been removed as it is now a part of the <color> data type.
CSS Level 2 (Revision 1)
The definition of 'border-color' in that specification.
Recommendation The property is now a shorthand property
CSS Level 1
The definition of 'border-color' in that specification.
Recommendation  

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 1.0 (1.7 or earlier) [1] 4.0 3.5 1.0 (85)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 4.0 1.0 (1.9.2) [1] 7.0 11 1.0

[1] The following Mozilla extensions set the border sides to multiple colors for Gecko based browsers like Firefox. -moz-border-top-colors, -moz-border-right-colors, -moz-border-bottom-colors, -moz-border-left-colors

See also