HTML5 Code Tutorial

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 no longer has any attributes and its appearance is controlled using your style sheet.

Used here in its default form.

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

---

4 More Years

The president will most likely remain in office 4 more years simply because of the the Republican competition. Not that it really matters to us. Our system is broken.

---

Styling the HR

This code is for the hr trimmed in red:
<hr style="border:solid #ff0000 1px; width: 50%; height: 8px; display: block; margin: 0 auto"/>

---

Here we remove the default blue border and add background color and box shadow:
<hr style="width: 50%; height: 8px; display: block; margin: 0 auto; border: none; box-shadow: 3px 3px 6px #0e0e0e; background-color: #898989"/>

---

Now some rounded bottoms and maybe a little glitch in the Safari browser:
<hr style="width: 70%; height: 16px; display: block; margin: 0 auto; border: none; border-radius: 0 0 20px 20px;box-shadow: 3px 3px 6px #0e0e0e; background-color: #fefefe"/>

Experiment!!