A line along the x-axis is referred to as a horizontal line used between the lines of paragraphs to make it easy to read. More specifically, these lines can be utilized to add a thematic break between different sections or paragraphs. With the help of an HTML <hr> tag, you can draw a horizontal line on the web page.

This write-up will guide you about the use of the HTML “<hr>” tag.

How to Insert Horizontal Line Using HTML <hr> tag?

The below example will add horizontal lines between the three <p> elements. To do so, let’s create an HTML file. Then, add three <p> elements to add some content and specify the “<hr>” tag between each one of them.

HTML

 
Save the HTML file, and open it in the browser to check out the results:

Now, let’s add some CSS properties to the <hr> element.

How to Apply CSS Properties to the <hr> Element?

The below section will demonstrate the CSS properties that are applied to the HTML elements along with the hr.

In the HTML file, inside the body element, add a div element with the class name “linebox”. Inside this div element, specify four <p> elements to add some content. Each <p> element is separated by <hr> with classes as line1, line2, line3, line4, and line5:

 
Style linebox div

 
Here is the description of the above-given code:

• • “margin” property sets the space of 5px around the element.
  • “border” property sets the border of 10px width, groove line type, and color as rgb(133, 132, 135).
  • “padding” property sets space around the content of the element.
  • “font-size” property sets the setting of font size to 16px.

Style line1 of hr

 
The “border” property having the value “5px” “solid” and “steelblue” is applied to the class line1 of hr element where the 5px represents the width of the line, solid is the line type, and steelblue is the color.

Style line2 of hr

 
For the class line2 of the hr element, the border property having the value “1px” “dotted” “blue” is applied where the 1px represents the width of the line, dotted is the line type, and blue is its color.

Style line3 of hr

 
For the class line3, the added value of the border is “3px” “dashed” “green” where the 3px represents the width, the dashed is the line type, and green is its color.

Style line4 of hr

 
Similarly, we have applied the border property to line4 and set its “border-radius” as “8px”.

It can be seen that using the HTML <hr> tag, we have added four types of horizontal lines on our web page:

Great! You have successfully learned about the HTML <hr> tag with examples.

Conclusion

To separate a section or paragraph, horizontal lines can be added to our web page with the help of the HTML <hr> tag. This element is known as an empty element because it does not hold a closing tag. You can also <hr> with several CSS properties. This article demonstrated the HTML <hr> tag and how to style it with CSS with the help of examples.