This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.



The CSS border-color property sets the color of an element’s four borders. This property can have from one to four values, made up of the elementary properties:

The default color is the currentColor of each of these values.

If you provide one value, it sets the color for the element. Two values set the horizontal and vertical values, respectively. Providing three values sets the top, vertical, and bottom values, in that order. Four values set all for sides: top, right, bottom, and left, in that order.

Overview table

Initial value
color: The value of the 'color' property for each of the border sides border-top-color, border-right-color, border-bottom-color, and border-left-color.
Applies to
All elements
Computed value
See individual properties
CSS Object Model Property


  • border-color: <color>
  • border-color: currentColor
  • border-color: inherit
  • border-color: transparent


Specify the color to use on all borders. This can be anywhere from one to four values representing the top, right, bottom, and left border respectively.
Is a keyword indicating that all four values are inherited from their parent’s element calculated value.
This will apply a border that is not visible but it can have a width applied.
The same as ‘color: inherit’, the color value inherited from parent object.


A simple example showing how to use the border-color property on HTML div elements.

.one {
          color: #6CC644;
          border: medium solid;

        /* You can use other color on each side */
        .two {
          border: 10px solid;
          border-color: #6CC644 #FFC621 #DE6525 #256A84;

        /* You can use other color for other styles */
        .three {
          border-width: 5px;
          border-style: ridge dashed solid;
          border-color: #6CC644 #DE6525;

        /* You can set horizontal and vertical using just two color values (horizontal is first then vertical) */
        .four {
            border-width: 3px;
            border-style: solid;
            border-color: #ccc #666;

View live example


 The color value can be a property keyword, an extended keyword, or a numerical value. The two property keywords are currentColor and transparent. currentColor is the ‘color’ property value from the parent object. transparent is shorthand for transparent black, rgba(0,0,0,0).

The color value can also be a numerical value, such as one of the following:

  • a basic color keyword, such as “red”
  • a hex value, such as #ff0000
  • an red-green-blue (RGB) value, such as rgb(255,0,0)
  • an RGB-alpha (RGBA) that includes color opacity, such as rgba(255,0,0,1) or rgba(100%,0%,0%,1)
  • a hue-saturation-lightness (HSL), such as hsl(0, 100%, 50%)
  • HSLa, such as hsl(0, 100%, 50%, 1)

The color value can also be an extended keyword, such as aliceblue or lavenderblush. For a full list of extended keywords, see the CSS Color Module Level 3 spec, which is the consolidation of various specifications.

Related specifications

CSS Level 3 - Backgrounds and Borders Module
W3C Candidate Recommendation
CSS Level 2 (Revision 1)
W3C Recommendation
CSS Level 3 - Color Module
W3C Recommendation

See also

Related articles


Related pages