CSS border-color – define color of four borders

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

CSS property border-color

1. When four values are specified this is the order:

   border-top-color, border-right-color, border-bottom-color, border-left-color
   

2. When less than four values are specified:

   h1 { border-color: red }                   /* red red red red */
   h1 { border-color: red blue }             /* red blue red blue */
   h1 { border-color: red blue green }      /* red blue green blue */
   

3. border-style must be set to something other than none and border-width should be > 0 for border-color to be applicable.

Example – border-color – top, right, bottom, left

<style type="text/css">
.box {
  width: 100px; height: 100px;
  border-style: solid;
  border-color: red blue green yellow;
}
</style>
<div class="box">
  Hello world in div
</div>

Example – border-color transparent

Here background color is transparent and hence background color of the element itself is displayed.

<style type="text/css">
.box {
  width: 100px; height: 100px;
  background-color: lightgreen;
  border-style: solid;
  border-width: 15px;
  border-color: transparent;
}
</style>
<div class="box">
  Hello world in div
</div>

Related

• CSS border - define border properties of an element
• CSS border-width - set element border width of four sides
• CSS border-style tutorial and examples
• CSS border radius and round corners examples

Specification

• W3C CSS 2.1 border-color specification