CSS Border Color
The border-color property sets the color of a border, defaulting to the element's text color when left unspecified.
Coloring a border
The <border-color> property accepts any color value: a name, HEX, RGB, or HSL. If you never set it, the border simply uses the element's current text color, which is set by the <color> property.
A green border
<!DOCTYPE html>
<html>
<head>
<style>
div {
border-style: solid;
border-color: #00643c;
}
</style>
</head>
<body>
<div>Bordered box</div>
</body>
</html>Per-side colors
Give the property up to four values to color each edge separately, again in clockwise order from the top. This is occasionally used to fake a simple 3D or ribbon effect.
Different colors per edge
<!DOCTYPE html>
<html>
<head>
<style>
.box {
border-style: solid;
border-width: 4px;
border-color: #00643c #0a9d63 #00643c #0a9d63;
}
</style>
</head>
<body>
<div class="box">Striped border box</div>
</body>
</html>Inheriting the text color
Because an unset border color follows the text color, you can style both together by setting only <color>. The keyword <currentColor> makes this relationship explicit.
Border follows text color
<!DOCTYPE html>
<html>
<head>
<style>
.tag {
color: #00643c;
border: 1px solid currentColor;
}
</style>
</head>
<body>
<span class="tag">New</span>
</body>
</html>Note: As with width and style, border-color usually rides along in the border shorthand rather than being set on its own.
