Style HR Horizontal Rule with CSS

Aug1809Aug 18, 09

It's a tricky subject, the <hr /> element. Like the <br /> element, it's syntactically odd and browsers have specific default styles for it that vary quite a bit. Since the goal is always to keep our HTML uncluttered, I thought I would explain how to work with this unruly piece of a document.

First, the HTML for this tutorial is always the following:

<hr />

- That's how the HTML specifications say we are to indicate a horizontal line, so that's all we want to use in the content layer. Presentation, on the other hand, will be a little more messy and unusual. First, let's remember the major browser quirks associated with the HR element, many of them from this article:

Internet Explorer allows color to define the background color, and gives it presidence over background-color
The border property does not behave correctly in Opera
The height property is (by default) broken in Safari

With these rendering issues in mind, the goal is to make our HR elements look like they have been cut into the page - a common visual effect used most notably by Apple:

Not that we should do everything Apple does, but they can whip up a mean UI.

To avoid this going on forever, here are the two bug fixes that need to be used to get things working across the major browsers:

Fixing the height property in Safari:

This one is simple, but not intuitive. For whatever reason, the height property is limited to a minimum of 3px in Safari. The easiest way to get around this is to set the max-height property to whatever the height of your HR needs to be. In our case, we're only using borders to style the element, so the max-height should be 0.

height: 0;
max-height: 0;

Fixing Opera's borders:

It looks like Opera renders the border-top and border-bottom properties correctly. That's a bonus, because those are the only ones we need. You might have noticed, though, that Opera has the same problem as Safari when setting the height of a horizontal rule element. Thankfully, the fix is also the same.

Making Internet Explorer 6 Behave:

First, we're not using the color or background-color properties, so that eliminates those IE bugs. Second, I don't test on IE6 because that browser only accounts for about 2% of the visitors to most of my sites. But, everyone should at least be able to view the un-styled HTML properly. The beauty of using only a single HR element to show horizontal lines is that the degradation is already built into every browser.

However, it's always a good idea to predict when IE6 can be made to work with little extra effort. Typically, the problems people run into are with minimum heights due to the font-size property having precedence, and floats not breaking properly. To avoid these potential annoyances, I decided to include a few lines:

font-size: 1px;
line-height: 0;
clear: both;

The rest is the same as you would have used if styling an empty div element instead of an hr element:

display: block;
position: relative;
padding: 0;
margin: 8px auto;
height: 0;
max-height: 0;
width: 100%;
clear: both;
border: none;
border-top: 1px solid #AAA;
border-bottom: 1px solid #FFF;
font-size: 1px;
line-height: 0;

Now we've got a working horizontal rule, styled properly using only CSS.
It looks like this:

Beautiful, sleek, and it looks identical across all the browsers people use.

About Jason Miller:

I am a JavaScript developer from Waterloo, Ontario, Canada. When I am not typing green code onto a black screen, you might find me at the nearest coffee pub checking out the brew. I run a internet firm called developIT and maintain blogs and web apps when I can.

Comments