CSS: border-color property

This CSS tutorial explains how to use the CSS property called border-color with syntax and examples.

The CSS border-color property defines the color of the border of a box.

Syntax

The CSS border-color property can be expressed with one, two, three or four values provided.

Syntax – One Value

The syntax for the CSS border-color property (with 1 value) is:

border-color: all;

When one single value is provided, the border-color value will apply to all four sides of the box (ie: top, right, bottom, left).

Syntax – Two Values

The syntax for the CSS border-color property (with 2 values) is:

border-color: top_bottom left_right;

When two values are provided, the first value will apply to the top and bottom of the box. The second value will apply to the left and right sides of the box.

Syntax – Three Values

The syntax for the CSS border-color property (with 3 values) is:

border-color: top right_left bottom;

When three values are provided, the first value will apply to the top of the box. The second value will apply to the right and left sides of the box. The third value will apply to the bottom of the box.

Syntax – Four Values

The syntax for the CSS border-color property (with 4 values) is:

border-color: top right bottom left;

When four values are provided, the first value will apply to the top of the box. The second value will apply to the right side of the box. The third value will apply to the bottom of the box. The fourth value will apply to the left side of the box.

The top, right, bottom, and left border-color values can be one of the following:

Value
Description

#RRGGBB
Hexadecimal representation of the border-color
p { border-color: #FF0000; }

rgb()
RGB representation of the border-color
p { border-color: rgb(255,0,0); }

name
Name of the border-color (ie: red, blue, black, white)
p { border-color: red; }

transparent
Border is not displayed but still takes up space on the page
p { border-color: transparent; }

inherit
Element will inherit the border-color from its parent element
p { border-color: inherit; }