CSS border-color

An element with a colored border.

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

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

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

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

colorname hex rgb rgba hsl hsla transparent initial inherit

<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.

#b4e9ec, #f00 green, red, steelblue purple, teal, steelblue, yellow

<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

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

• Our CSS border-top-color Property Reference
• Our CSS border-right-color Property Reference
• Our CSS border-bottom-color Property Reference
• Our CSS border-left-color Property Reference
• Our HTML Reference Guide