border-color: ***; border-***-color: ***;

Browser
  • IE
  • Cr
  • Sf
  • Fx
  • O

The border-color and border-***-color properties sets the border color of an element.
(*** = top, bottom, left, and right)

  • border-color : This is a shorthand property for setting the color for the four borders.
  • border-***-color : Sets the color of the top, bottom, left, and right borders.

div {
border-width: thick;
border-color: red;
border-style: solid;
}

p {
border-width: thick;
border-top-color: #85b9e9;
border-right-color: #bde9ba;
border-bottom-color: #ffd37d;
border-left-color: #d1d1d1;
border-style: solid;
}

border-color : This is a shorthand property for setting the color for the four borders.

Property Value Explanation
border-color color code or name the top, bottom, left, and right borders
  • border-color: #85b9e9; : [all sides] borders
  • border-color: #85b9e9 #bde9ba; : [top, bottom] [left, right] borders
  • border-color: #85b9e9 #bde9ba #ffd37d; : [top] [left, right] [bottom] borders
  • border-color: #85b9e9 #bde9ba #ffd37d #d1d1d1; : [top] [right] [bottom] [left] borders

border-***-color : Sets the color of the top, bottom, left, and right borders.

Property Value Explanation
border-top-color color code or name the top border
border-right-color color code or name the right border
border-bottom-color color code or name the bottom border
border-left-color color code or name the left border

Example


<html>
<head>
<title>TAG index</title>

<style type="text/css">

h2, h3, span {
border-width: thick;
border-style: solid;
}

.example1 {
border-color: red;
}
.example2 {
border-top-color: #85b9e9;
border-right-color: #bde9ba;
border-bottom-color: #ffd37d;
border-left-color: #d1d1d1;
}

</style>

</head>
<body>

<h2 class="example1">Specifies the red border</h2>
<h3 class="example2">Specifies four colors</h3>
<p>Specifies the <span class="example1">red</span> border</p>

</body>
</html>
Output

Specifies the red border

Specifies four colors

Specifies the red border