Border-color

In this chapter we will learn how to use the border-color property.

The border-color CSS property is a shorthand for setting the color of the four sides of an element's border: border-top-color, border-right-color, border-bottom-color, border-left-color. Each side can have its own value.

Values will be specified in the following border: top, right, bottom, left.

The border-color property we need to use with the border-style property.

The border-color property has no effect if the border-style property is set to none.

This property takes any CSS colors value. Default color is black.

Internet Explorer 6 (and earlier versions) does not support the property value "transparent".

CSS Syntax

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

Let's see an example:

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

As you can see all sides are blue.

Now let's see an example, where each side has different color.

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

Property Values

Value Descriptions
color Indicates color of borders. Default color is black.
transparent Indicates that the border color to be transparent.
initial It makes the property use its default value.
inherit It inherits the property from its parents element.