CSS Border Color

CSS Border Color

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 -

1. Directly by color names like red, blue, green etc.

2. RGB values, like rgb(0,0,255)

3. HEX values, like #00ff00

4. HSL values, like hsl(50%,50%,50%)

5. 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>
<link rel="stylesheet" href="sample.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</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 -