CSS border-color Property

The CSS border-color property is a shorthand for setting the color of the four sides of an element's border. It is shorthand for the following properties:


Each side can have its own value. The border-color property is used with the border-style property. If the value is 0, the border-color property has no effect.

This property takes any CSS colors value. Default color is the current color of the element.

The border-color property can have 4 values. If it has one value, the color is applied to all four borders. If it has two values, the first value is set to the top and bottom borders, the second value is set to the right and left. If it has three values, the first one is applied to the top border, the second one to the right and left, and the third one to the bottom. If it has four values the first is set to the top, the second to the right, the third to the bottom and the fourth to the left.

Initial Value currentColor
Applies to All elements. It also applies to ::first-letter.
Inherited No.
Animatable Yes. The borders of the box are animatable.
Version CSS1
DOM Syntax object.style.borderStyle = "dotted double";

Syntax

border-color: color | transparent | initial | inherit;

Here we have an example where only one value is applied. It sets the color to all fours sides of the element.

Example of the border-color property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .dotted {
        border-style: dotted;
        border-color: #1c87c9;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <div class="dotted">Example with blue dotted border.</div>
  </body>
</html>

Result

CSS border-color Property

Let’s see another example where four values are applied. The first one is used to the top border, the second one to the right, the third one to the bottom and the fourth one to the left.

Example of the border-color property with 4 values:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .solid {
        border-style: solid;
        border-color: #1c87c9 cyan yellow #8ebf42;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <div class="solid">Example with border-color property.</div>
  </body>
</html>

You can set hexadecimal, RGB, RGBA, HSL, HSLA or color names as a value for the border-color property.

Learn more about HTML Colors.

Example of the border-color property with the "color" value:

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        border: 5px solid #666;
        width: 60%;
        padding: 5px;
      }
      .name {
        border-color: lightblue;
      }
      .hex {
        border-color: #1c87c9;
      }
      .rgb {
        border-color: rgba(0, 0, 0, 0.15);
      }
      .hsl {
        border-color: hsl(89, 43%, 51%);
      }
    </style>
  </head>
  <body>
    <p class="name">Border with a named color.</p>
    <p class="hex">Border with a hexadecimal value.</p>
    <p class="rgb">Border with a RGB color value.</p>
    <p class="hsl">Border with a HSL color value.</p>
  </body>
</html>

Values

Value Description Play it
color Sets a color for the borders. Default color is the current color of the element. Color names, hexadecimal color codes, rgb(), rgba(), hsl(), hsla() can be used. Required value. Play it »
transparent Makes the border color transparent. Play it »
initial Sets the property to its default value. Play it »
inherit Inherits the property from its parent element.

Browser support

chrome firefox safari opera
1.0+ 1.0+ 1.0+ 3.5+

Practice Your Knowledge

Which of the following statements are true about the 'border-color' property in CSS?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?