CSS border-color Property

CSS border-color Property

In CSS border-color property is used to specify the color of the border of an element.

In CSS border-color can be applied in the following ways -

Various CSS Color Values -

In CSS, colors can also be specified using -

Directly by color names like red, blue, green etc.
RGB values, like rgb(0,0,255)
HEX values, like #00ff00
HSL values, like hsl(50%,50%,50%)
Transparent

Example - Applying color directly by color name

<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
p.one {
border-style: solid;
border-color: red;
}

p.two {
border-style: solid;
border-color: green;
}

p.three {
border-style: dotted;
border-color: blue;
}

p.four {
border-style: dotted;
border-color: aqua;
}
p.five {
border-style: dotted;
border-color: violet;
}
</style>
</head>
<body>
<h1 class="fruit" style="color:black" >This is first Heading
</h1>
<p class="one">
this is an apple and an apple a day keeps doctor away
</p>
<p class="two">
this is an apple and an apple a day keeps doctor away
</p>
<p class="three">
this is an apple and an apple a day keeps doctor away
</p>
<p class="four">
this is an apple and an apple a day keeps doctor away
</p>
<p class="five">
this is an apple and an apple a day keeps doctor away
</p>
</body>
</html>

Output -

Now we can also specify the different colors for all four sides of the border.

We can specify the different colored border sides by writing four different color names with a white space continuously in the border-color property.

Syntax -

border-color : green voilet yellow blue

green-top,

Violet-right

Yellow - bottom

Blue - left

Example -

<!DOCTYPE html>
<html>

<head>
<style>
h1{
border-style: solid;
border-color: green violet yellow blue;
}
</style>
</head>

<body>

<h1 class="fruit">This is first Heading</h1>
</body>

</html>

Output -

Example - showing rgb color -

Output -

Example - using hex value -

Output -