By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

CSS Border-color Property

Reference on the CSS Border-color Property.

Edited: 2015-12-09 14:51

The CSS border-color property is used to control the color of all the borders of a given element in a single declaration.

Unless you need to separately control the color, it is recommended that you use the border shorthand declaration, which allows you to set the style, color and width at the same time.

div {
  border-color: black;
}

Possible Values

Read the Colors entry in the reference, to learn about possible color values.

Inherited? NO!

Border-color example

The border-color is used when you need to change the color of a HTML elements border. It can either be used to overwrite past CSS declarations made using the border property, or in conjunction with border-style and border-width.

First lets show how to overwrite a more generally matching shorthand deceleration:

div {
  border:1px solid black; /* Shorthand */
  border-color:red; /* Only targets the color */
}

The above would result in a red border:

You can also set each CSS property separately, which is done like demonstrated below:

div {
  border-width:1px; /* Only targets the width */
  border-style:solid; /* Only targets the style */
  border-color:red; /* Only targets the color */
}