How to style an hr element with CSS?
The <hr> element in HTML is used to create a horizontal line in the webpage. This horizontal line can be used for paragraph breaks or for other usages. In this tutorial, we will learn to style The <hr> element with CSS.
Using border property
The border property can be used to style the hr element. To change the color of <hr> element use background-color property. We can also add specific values to the border to define the thickness of the border.
To create a dotted <hr> element use dotted value with border property.
Example: Style the <hr> Element
Here, we have added color and thickness to the hr element.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML </title>
<style>
hr {
border-color: red;
border: 2px solid blue;
}
</style>
</head>
<body>
<h2> Styling the hr element</h2>
<hr>
<p>We have styled the hr element. </p>
</body>
</html>
Output
Here is the output of the above program.
Example: Create a dotted hr element
Here, we are styling the <hr> tag by making it dotted using the border: 3px dotted blue; CSS.
Conclusion
In this tutorial, we have discussed the CSS properties which is used to style the hr element. We can add color using border-color property and add thickness and design of the border too.
