CSS border-color - define color of four borders

CSS border-color – define color of four borders

on Mar 14, 2016

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

CSS property border-color

CSS version:	CSS 2.1
Value:	[color\|transparent]{1,4} \| inherit
Initial:	depends on user agent (individual properties)
Applies to:	all elements
Inherited:	no

Few points to note:

When four values are specified this is the order:

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

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 */

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>

refresh

try it online

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>

refresh

try it online