CSS Border-Style Property

The border-color property defines the color of the border. This property takes values in the following forms:

• Transparent
• Hexadecimal code
• Color name
• RGB
• RGBa
• HSL
• HSLa

Both RGB and HSL use three numbers to determine the color. RGBa and HSLa add a fourth number to indicate the level of transparency, with 0 being fully transparent, and 1 being fully opaque.

The syntax for the border-color property is as follows:

Transparent:

{border-color: transparent;}

Hexadecimal code:

{border-color: #XXXXXX;} where XXXXXX is a hexadecimal code.

Color name:

{border-color: [color_name];} where color_name denotes the name of the color in plain English.

RGB:

{border-color: rgb (X, Y, Z); }   where X, Y, and Z are numbers between 0 and 255.
    OR
{border-color: rgb (X%, Y%, Z%); }   where X, Y, and Z are numbers between 0 and 100.

RGBa:

{border-color: rgba (X, Y, Z, A); }   where X, Y, and Z are numbers between 0 and 255, and A is a number between 0 and 1.
    OR
{border-color: rgba (X%, Y%, Z%, A); }   where X, Y, and Z are numbers between 0 and 100, and A is a number between 0 and 1.

HSL:

{border-color: hsl (X, Y%, Z%); }   where X is a number between 0 and 360, Y and Z are numbers between 0 and 100.

HSLa:

{border-color: hsla (X, Y%, Z%, A); }   where X is a number between 0 and 360, Y and Z are numbers between 0 and 100, and A is a number between 0 and 1.

The default border-color value is black.

The border-color property itself is a short hand for the following properties:

• border-left-color
• border-right-color
• border-top-color
• border-bottom-color

There can be one, two, three, or four values set for the border-color property. The rules are as follows:

• one value: the color applies to all four borders.
• two values: the first color applies to the top border and the bottom border, and the second color applies to the left border and the right border.
• three values: the first color applies to the top border, the second color applies to the left border and the right border, and the third color applies to the bottom border.
• four values: the first color applies to the top border, the second color applies to the right border, the third color applies to the bottom border, and the fourth color applies to the left border.

CSS Declaration

border-style: solid; border-color: red green blue;

which results in the following:

In Example 1, three border colors are defined. So the first color (red) applies to the top border, the second color (green) applies to the left and right borders, and the third color (blue) applies to the bottom border.