border-color

Summary

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
Inherited: No
Media: visual
Computed value: See individual properties
Animatable: Yes
CSS Object Model Property: borderColor
Percentages: N/A

Syntax

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

Values

<color>: 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.
inherit: Is a keyword indicating that all four values are inherited from their parent’s element calculated value.
transparent: This will apply a border that is not visible but it can have a width applied.
currentColor: The same as ‘color: inherit’, the color value inherited from parent object.

Examples

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

Usage

 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

Attributions

Mozilla Developer Network : Article
Microsoft Developer Network: [Windows Internet Explorer API reference Article]