CSS 'border-color' Property Explained

The CSS 'border-color' property specifies the color of an element's border. It can simultaneously set the color for all four borders or target each border individually with one to four color values. This property is essential for defining the visual boundaries of elements, enhancing usability, and contributing to the aesthetic appeal of web designs.

CSS 'border-color' Property Examples

See the Pen CSS 'border-color' Property by Webzstore (@webzstore) on CodePen.

The 'border-color' property only sets color, so the border must also have a width and a visible style. The default border style is none, which means border-color on its own draws nothing. A typical pairing is border: 4px solid; border-color: crimson;, or four different colors with border-color: red yellow green blue; (top, right, bottom, left).

Browser Support For 'border-color' Property

Source: MDN browser-compat-data 8.1.4, checked 3 October 2026. Prefixed support and implementations that were later removed are not counted, and some browsers list partial support or extra values. See the MDN reference for border-color for the full compatibility details, including mobile browsers.

CSS Syntax of the 'border-color' Property

border-color: <color>{1,4};

.box {
  border: 4px solid;                  /* width and style are required for a visible border */
  border-color: red yellow green blue; /* top, right, bottom, left */
}

• When specifying one color, all four borders use this color.
• Two colors define the top and bottom borders with the first color and the right and left borders with the second.
• Three colors set the top border with the first color, the right and left with the second, and the bottom border with the third.
• Four colors apply to the borders of the top, right, bottom, and left.

Usage of the 'border-color' Property

Use 'border-color' to customize the color of borders surrounding an element. This versatile property allows for uniform color application across all borders or specifies different colors for the top, right, bottom, and left borders. It's particularly useful in distinguishing elements, improving visual hierarchy, or simply adding decorative flair to a webpage.

Property Values of the 'border-color' Property

• Color: Sets the border color using any standard CSS color format (named colors, HEX, RGB(a), HSL(a)).
• Transparent: Makes the border transparent. The border still takes up its space; only the color is invisible.
• currentcolor: Uses the element's color (text color) value. This is the initial value of each border side.
• Initial: Resets the 'border-color' to its default value (currentcolor on all four sides).
• Inherit: The element inherits the 'border-color' from its parent element.