This page is Ready to Use

Notice: The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.

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

See also

Related articles

Border

Related pages

Attributions