border-color

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

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.

Example for border-color and border-style

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

Specifications

Specification Status Comment
CSS Backgrounds and Borders Module Level 3 Candidate Recommendation The transparent keyword has been removed as it is now a part of the <color> data type.
CSS Level 2 (Revision 1) Recommendation The property is now a shorthand property
CSS Level 1 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 ? 1.0 (1.9.2) [1] ? ? ?

[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

Document Tags and Contributors

Last updated by: Naesten,
Hide Sidebar