CSS border-color:-
CSS border-color property specifies the color of the border.
The border color can be specified below:
- name - specifies the color name like "red"
- HEX - specifies the HEX value like "#ff0000"
- RGB - specifies the RGB value like "rgb(255, 0, 0)"
- HSL - specifies the HSL value like "hsl(o, 100%, 50%)"
- Transparent
NOTE:- if the border color is not set, it inherits the color of the element.
<!DOCTYPE html>
<html>
<head>
<style>
p. one{border-style: solid;
border-color: red;}
p. two{border-style: solid;
border-color: blue;}
p. one{border-style: dotted;
border-color: green;}
</style>
</head>
<body>
<h1> CSS Border Color Property </h1>
<p> This property specifies the property of the border.</p>
<p class="one">A solid red border. </p>
<p class="two">A solid blue border. </p>
<p class="three">A dotted green border. </p>
</body>
</html>
Try this code for a better experience
Specific side color:-
The border-color property can be one of them top border, right border, left border, and bottom border also.
<!DOCTYPE html>
<html>
<head>
<style>
p. one{border-style: solid;
border-color: red blue green yellow;}
</style>
</head>
<body>
<h1> CSS Border Color Property </h1>
<p> The border-color property can be one of them top border, right border, left border, and bottom border also.</p>
<p class="one"> This is a solid multicolor border </p>
</body>
</html>
Try this code for a better experience
HEX value:-
We can set the border color from the HEX value.
<!DOCTYPE html>
<html>
<head>
<style>
p. one{border-style: solid;
border-color: #ff0000;} /*red*/
p. two{border-style: solid;
border-color: #0000ff;} /*blue*/
p. three{border-style: solid;
border-color: #bbbbbb;} /*gray*/
</style>
</head>
<body>
<h1> CSS Border color property </h1>
<p class="one"> This is a solid red color. </p>
<p class="two"> This is a solid blue color. </p>
<p class="three"> This is a solid gray. </p>
</body>
</html>
Try this code for a better experience
RGB value:-
Or by using RGB we can change the color of the border.
<!DOCTYPE html>
<html>
<head>
<style>
p. one{border-style: solid;
border-color: rgb(255, 0, 0);} /*red*/
p. one{border-style: solid;
border-color: rgb(0, 0, 255);}/*blue*/
p. one{border-style: solid;
border-color: rgb(187, 187, 187);} /*gray*/
</style>
</head>
<body>
<h1> CSS Border color property </h1>
<p class="one"> This is a solid red color. </p>
<p class="two"> This is a solid blue color. </p>
<p class="three"> This is a solid gray. </p>
</body>
</html>
Try this code for a better experience
HSL value:-
You can also change the color of the border from the HSL value.
<!DOCTYPE html>
<html>
<head>
<style>
p. one{border-style: solid;
border-color: hsl(0, 100%, 50% );} /*red*/
p. one{border-style: solid;
border-color: hsl(240, 100%, 50%);} /*blue*/
p. one{border-style: solid;
border-color: hsl(0, 0%, 73%);} /*gray*/
</style>
</head>
<body>
<h1> CSS Border color property </h1>
<p class="one"> This is a solid red color. </p>
<p class="two"> This is a solid blue color. </p>
<p class="three"> This is a solid gray. </p>
</body>
</html>
Try this code for a better experience
0 Comments