How to use CSS border color property with 3 examples

The border-color property of CSS

With the border-color property, you can set the border color of one or all four borders of the specified element. A simple example of using the border color CSS property is:

border-color: blue;

>>See an example to use border color property

The border color value can be set by using:

  1. Hexadecimal value
  2. Color name: e.g red, green, yellow etc.
  3. RGB value

Example of setting border color of Div

In this example, four border styles are given different values for the top, left, right and bottom borders. Whereas, CSS border-color is given the single color name, blue. You can see all borders (top, bottom, left and right) will take the same color.

Note that, the border-style must be specified in order to make border-color property work.

Experience this example online

Border color of div with four values

In this example, four borders are specified and four color values are assigned to the border-color property. The order of color to each border will be:

  • Top = blue
  • Right = red
  • Bottom = green
  • Left = yellow

CSS border-color property

Experience this example online

Example of setting border-color with each border’s property

As such each border can be specified by using its own set of properties, like border-right, border-left etc. Each border has its own color property as well e.g border-right-color.

This example demonstrates how to specify each border color by its property.

Note, this example also uses different color values for different borders.

Experience this example online


Further Reading: CSS table border