CSS - border-color

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

Example

 

HTML Content

HTML
<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

CSS
#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

Syntax  

CSS
/* border-color: color */ /* the color applies to all sides */ 
border-color: red;

/* border-color: top&bottom right&left */
border-color: red #f015ca;

/* border-color: top right&left 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 the edges.
inherit
Is a keyword indicating that all four values are inherited from their parent's element calculated value.

Formal syntax

CSS
<a title="" href="css/color_value"><color></a><a title="Curly braces" href="css/value_definition_syntax#curly_braces_(.7b_.7d)">{</a>1,4<a title="Curly braces" href="css/value_definition_syntax#curly_braces_(.7b_.7d)">}</a><p>where <br><code><color> = <a href="css/border-color#rgb()"><rgb()></a> <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <a href="css/border-color#rgba()"><rgba()></a> <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <a href="css/border-color#hsl()"><hsl()></a> <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <a href="css/border-color#hsla()"><hsla()></a> <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <hex-color> <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <a href="css/border-color#named-color"><named-color></a> <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> currentcolor <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <a href="css/border-color#deprecated-system-color"><deprecated-system-color></a></code></p><p>where <br><code><rgb()> = rgb( <a href="css/border-color#rgb-component"><rgb-component></a><a title="Hash mark" href="css/value_definition_syntax#hash_mark_(.23)">#</a><a title="Curly braces" href="css/value_definition_syntax#curly_braces_(.7b_.7d)">{</a>3<a title="Curly braces" href="css/value_definition_syntax#curly_braces_(.7b_.7d)">}</a> )<br><rgba()> = rgba( <a href="css/border-color#rgb-component"><rgb-component></a><a title="Hash mark" href="css/value_definition_syntax#hash_mark_(.23)">#</a><a title="Curly braces" href="css/value_definition_syntax#curly_braces_(.7b_.7d)">{</a>3<a title="Curly braces" href="css/value_definition_syntax#curly_braces_(.7b_.7d)">}</a> , <a href="css/border-color#alpha-value"><alpha-value></a> )<br><hsl()> = hsl( <a href="css/border-color#hue"><hue></a>, <a title="" href="css/percentage"><percentage></a>, <a title="" href="css/percentage"><percentage></a> )<br><hsla()> = hsla( <a href="css/border-color#hue"><hue></a>, <a title="" href="css/percentage"><percentage></a>, <a title="" href="css/percentage"><percentage></a>, <a href="css/border-color#alpha-value"><alpha-value></a> )<br><named-color> = <ident><br><deprecated-system-color> = ActiveBorder <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> ActiveCaption <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> AppWorkspace <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> Background <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> ButtonFace <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> ButtonHighlight <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> ButtonShadow <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> ButtonText <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> CaptionText <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> GrayText <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> Highlight <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> HighlightText <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> InactiveBorder <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> InactiveCaption <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> InactiveCaptionText <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> InfoBackground <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> InfoText <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> Menu <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> MenuText <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> Scrollbar <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> ThreeDDarkShadow <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> ThreeDFace <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> ThreeDHighlight <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> ThreeDLightShadow <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> ThreeDShadow <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> Window <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> WindowFrame <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> WindowText</code></p><p>where <br><code><rgb-component> = <a title="" href="css/integer"><integer></a> <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <a title="" href="css/percentage"><percentage></a><br><alpha-value> = <a title="" href="css/number"><number></a><br><hue> = <a title="" href="css/number"><number></a></code></p>

Description  

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 valueas each of the properties of the shorthand:
Applies toall elements. It also applies to ::first-letter.
Inheritedno
Mediavisual
Computed valueas 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).
Animatableas each of the properties of the shorthand:
Canonical orderthe unique non-ambiguous order defined by the formal grammar

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  

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 Initial definition

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/border-color

CSS CSS Borders CSS Property Reference