Styling Horizontal Rules

21 Nov 2006 > 0 Comments

Creating a <div> based Template using CSS (Part: 5)

Horizontal rules are used to divide content. But without styling, horizontal rules look pretty awful.

HTML

In HTML the Horizontal Rule has no closing tag.

<hr>

XHTML

In XHTML the horizontal rule must be self-closing.

<hr />

Stying a Horizontal rule directly using CSS is a bit of a cross-browser problem, and a common workaround is to nest the <hr /> inside a <div> element, using the class attribute.

Markup

<div class="hr"><hr /></div>

In the Stylesheet, set the property and value as display: none; for the hr type selector. Although the Horizontal Rule is contained within the document it will only display when the Stylesheet is switched off.

Then, add a border to the div class selector .hr

CSS

hr {display: none;}
.hr {border-top: 1px solid #000000;}

And now the horizontal rule (or rather the <div> wrapper) displays as a line 1 pixel in height, which can be further styled using alternative border values.

Examples

1px dashed

1px dotted

5px solid

< Back to everything
Keep going… >

Related Posts

• Creating a <div> based Template using CSS (part 1 - 12)
• Styling Tables
• Styling Links
• Styling the Background and Foreground
• Creating rounded corners when working with screenshots