Horizontal Rule Tag

The horizontal rule or <hr> tag is used to draw a horizontal line on a page.

In HTML5 it represents a themeatic break or change in topic.

It has no attributes and its appearance is controlled using your style sheet.

Used here in our standard default form.

Note: It displays differently from browser to browser in default.

Styling the HR

This code is for the red hr :
style="width: 70%; height: 8px; display: block; margin: 0 auto; border: none; box-shadow: 3px 3px 6px #000; background-color: #ff0000"

We added background color and box shadow

Now some rounded bottoms and maybe a little glitch in the Safari browser:
<hr style="width: 70%; height: 1rem; display: block; margin: 0 auto; border: none; border-radius: 0 0 1.25rem 1.25rem;box-shadow: 3px 3px 6px #000; background: whitesmoke">

This code is for the rainbow hr :
style="width: 70%; height: 1rem; display: block; margin: 0 auto; border: none; box-shadow: 3px 3px 6px #000; background: linear-gradient(135deg, #ff0000 0%, #ffcc00 50%, dodgerblue 100%);"

Experiment!!

🔺