Style HR Horizontal Rule with CSS

May2710May 27, 10

Update: (May 27th, 2010) Corrected IE issue, removed outdated Opera and Safari workarounds.

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 precedence 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:

The workarounds below are no longer needed by Opera and Safari:

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;
overflow: visible;

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;
width: 100%;
clear: both;
border: none;
border-top: 1px solid #AAA;
border-bottom: 1px solid #FFF;
font-size: 1px;
line-height: 0;

overflow: visible;

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

And in Internet Explorer 5.5, we have the exact same style applied:

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

wsvap#

Not working in IE6 :) (test this page in IE6)

jason#

What does it look like in IE6? I no longer test in that browser (I can't find a Windows install old enough and got sick of running VMs while Photoshop was open)

I don't care about IE6 as long as the fallback is some kind of horizontal bar. If it's completely disappeared, then something nasty with the star hack might be in order.

ohreally#

"presidence" ??

jason#

@ohreally: Good catch, I must have had Spell Check disabled when I wrote this.

Peter#

Yep, works great, though I had to remove 'clear: both' to get them all spaced correctly (using more than one on a page). First one was incorrectly spaced above the line, before I removed this, the rest were fine.