CSS border-color Property

The border-color property sets the color of the border.

Color values can be hex, rgb, hsl, rgba, hsla, or a color name.

A border-style value is required for a border to show.

Example

#

An element with a colored border.

A tomato colored border.
<style>
  .border-color {
    padding: 20px;
    border-style: solid;
    border-color: tomato;
  }
</style>

<div class="border-color">
  A tomato colored border.
</div>

Syntax

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

Values

#

Value Description
color Sets the border color. Accepts colorname, hex, rgb, rgba, hsl, hsla values.
transparent Sets border color to transparent
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

Click the buttons to see the different border-color values.

border-color: #302ea3
<style>
  .border-example {
    padding: 20px;
    border-style: solid;
    border-color: #302ea3;
  }
</style>

<div class="border-example">
  border-color: #302ea3
</div>

In previous examples all sides have the same color.
Click the buttons to see the multi border-color values.

border-color: #b4e9ec #f00;
<style>
  .border-example-multiple {
    padding: 20px;
    border-style: solid;
    border-color: #b4e9ec #f00;
  }
</style>

<div class="border-example-multiple">
  border-color: #b4e9ec #f00;
</div>

Code Explanation

To specify different colors for each side, values are assigned accordingly:

  • Single value: all four sides of the element
  • Two values: top and bottom, left and right sides
  • Three values: top, both left and right, and bottom sides
  • Four values: top, right, bottom, and left sides respectively

Browser support

This table shows when border-color support started for each browser.

Chrome
1.0 Dec 2008
Firefox
1.0 Nov 2004
IE/Edge
4.0 Sep 1997
Opera
3.5 Nov 1998
Safari
1.0 Jun 2003

You may also like

Guides