CSS Border Color

The border-color property is used to set the color of the four borders.

The color can be set by:

• name - specify a color name, like "red"
• HEX - specify a HEX value, like "#ff0000"
• RGB - specify a RGB value, like "rgb(255,0,0)"
• HSL - specify a HSL value, like "hsl(0, 100%, 50%)"
• transparent

Note: If border-color is not set, it inherits the color of the element.

Example

Demonstration of the different border colors:

Output :

Specific Side Colors

The border-color property can have from one to four values (for the top border, right border, bottom border, and the left border).

Example

Output :

HEX Values

The color of the border can also be specified using a hexadecimal value (HEX):

Example

Output :

RGB Values

Or by using RGB values:

Example

Output :

HSL Values

You can also use HSL values:

Example

Output :

---