border-color shorthand property sets the border color on all four sides of an element using from one to four of the values specified. Each border can have its own value.
Syntax:
border-color: [ <color> | transparent ]{1,4} | inherit
transparent: the border is not drawn but it still takes up space on the page.
Borders are placed on top of the element’s background.
If no color value is specified for border-color, the border will use the color value of the element.
If one color value is given, it applies to all four borders.
Two values apply first to the top and bottom border and second to the left and right border.
Three values apply first to the top, second to the left and right and third to the bottom border.
Four values apply to top, right, bottom and left border in that order.
Eg:
<html>
<head>
<style>
#example p {
border-style: solid;
border-color: red blue green;
width: 300px;
}
</style>
</head>
<body>
<div id="example">
<p>border color test</p>
</div>
</body>
</html>
Outputs:
