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.

---

 

 

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

 

Free Tools and Resources

Free Bullet Images, WingDings and WebDings
🔵 🔶 😀 🎈 🐝 🏀 👉 👲 💡 🍅

Have you tried our NEWEST template kit with scrolling columns? Download Template Kit #601 - 4 Page Kit or Test Drive It!