LAST UPDATED: AUGUST 5, 2021
How to Change the Color of hr Element using CSS?
The <hr> element in HTML represents a horizontal line drawn on the page. This horizontal line can be used for paragraph breaks or any other purpose on the webpage. The default horizontal line has a default gray color but we can change its color.
In this tutorial, we will learn to change the color of an <hr> element using CSS.
Using background-color property
The background-color property can be used to change the color of the <hr> element in HTML. Just add color values to the background-color property.
Example: Add color to <hr> element using background-color property
In this program, we changed the color of the hr tag using background-color property.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Change the Color of hr Tag using CSS</title>
<style>
.red {
clear: both;
color: red;
background-color: red;
height: 1px;
border-width: 0;
}
</style>
</head>
<body>
<h2>Change color of hr</h2>
<p> Default hr <p>
<hr>
<p>Red color hr</p>
<hr class="red">
</body>
</html>
Output
Here is the output of the above program.
Using border property
There is yet another way to change <hr> element color. Use the border property to add color to <hr> element.
Example: Add color to <hr> element using border property
In this example, we will change <hr> color using border property.
Conclusion
We learned to change the color of <hr> element using CSS. We can change <hr> element color using background-color property or border property. This property may not change color in some browsers.
