To change the color of an <hr> element, you can simply use the background-color property. However, if you apply the background-color alone, it would not change its color.
To make the background-color work on the <hr> element, you have to use it in combination with the height and the border property.
In the following example, we have changed the color of the <hr> element to red with 2px height and no border around it. The height property can be simply used to change the thickness of the <hr> element.
Example:
hr{
background-color: red;
height: 2px;
border: none;
}
Change the color of the hr Element with the border property
In the previous example, we changed the color of the hr element to red with the help of the background-color property. But that’s not the only way of achieving this.
We can also change the color of hr element using the border property. To control the thickness of the hr tag, we can use the border-width property, or alternatively, we can specify it in the border shorthand property.
Here is a fully working example:
Example:
hr{
border: none;
border-bottom: 2px solid red;
}
The main advantage of using the border to change the hr color is that we can change the style of the hr as well.
In the following example, we have created a red color dashed <hr>. To do that we have to only change the style of the border from solid to dashed:
Example:
hr{
border: none;
border-bottom: 2px dashed red;
}
