CSS Property border-color








border-color property sets the color for the whole border or sets a different color for each of the four sides.

We can individually change the color of the bottom, left, top and right sides of an element's border using the following CSS properties:

  • border-bottom-color changes the color of bottom border.
  • border-top-color changes the color of top border.
  • border-left-color changes the color of left border.
  • border-right-color changes the color of right border.




Summary

ItemValue
Inherited No.
Version CSS1
JavaScript syntax object.style.borderColor="#FF0011 red"
Applies to All elements.

CSS Syntax

border-color: color [ color color color] 

The following code shows the rules for default border color value.

border-color:red green blue pink;

is equal to

  • top border is red
  • right border is green
  • bottom border is blue
  • left border is pink
border-color:red green blue;

is equal to

  • top border is red
  • right and left borders are green
  • bottom border is blue
border-color:red green;

is equal to

  • top and bottom borders are red
  • right and left borders are green
border-color:red;

is equal to

  • all four borders are red




Property Values

The property values are listed in the following table.

Value Description
color Set the color. Default color is black.
transparent Set border color to transparent. Default value
inherit Inherit the border color from the parent element

Browser compatibility

border-color Yes Yes Yes Yes Yes

Example

An example showing how to use border-color CSS property.

<!DOCTYPE HTML>
<html>
   <head>
      <style>
         div{ text-align: center;<!--  w  ww. j  a  va  2s.c o  m-->
              margin-bottom: 1em;
              padding: .5em;
              border-width: thick;
              border-color: blue;
              border-style: groove; 
         }
      </style>
   </head>
   <body>
      <div>this is a test. </div>
   </body>
</html>

Click to view the demo