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!!