Sova v siti (in Czech) > CSS Workshop > Styling <hr>

Styling <hr> with CSS

You can read this article in Italian: <hr> stilosi con i CSS.

Introduction

Even though it's sometimes recommended to replace the <hr> element with cascading stylesheets only using horizontal borders of other elements, I prefer <hr> as a section divider. This makes a web page more readable even in older browsers that receive only pure HTML with no style sheet.

On the other hand, simple, unstyled <hr> does not look good in richly styled documents. That's why I tried to find a couple of cross-browser compatible ways to make it prettier. I used to hide style sheets from the version 4 browsers and older, so my targeted browsers are IE5+, Opera 5+ and Mozilla/NN6.

Which properties work

Various CSS properties can be applied on <hr>:

All three browsers allow setting width and height of the <hr> element.
The border property can be used in IE and Mozilla. It does not work well in Opera (see examples below).
IE uses the color property for the <hr> element.
Opera and Mozilla use background-color for the <hr> element.
All three browser allow setting a background-image of the <hr> element, however this is not very useful in IE and Opera (see the last example).

Examples

Now, let's take a look at a couple of examples. The style sheet of this page begins with the following rule set:


      hr {

        border: 0;

        width: 80%;

      }

so all rules are 80% wide and should have no initial borders. Such a rule looks almost the same in IE and Opera, however K-Meleon (Gecko-based browser) displays nothing, because it uses borders to render the <hr> element. In your current browser it looks like this:

Let's add colors

If you want to show a solid, red line, use the following code:


      color: #f00;

      background-color: #f00;

      height: 5px;

and you get this result:

Notice, that you have to use both the color and the background-color properties — the former for IE, the latter for Opera and Mozilla. Also notice, that Opera still displays 1px borders around the rectangle, so setting the height property less than 3px may not be a good idea. For Mac compatibility info see note 1.1.

Next three examples shows another variations that look reasonably well in all three browsers.

Thin, red (unfortunately black in Opera), solid line, 1px high:

Empty, red rectangle, 10px high:

Two thin lines, one above another (Opera displays a rectangle). Both are red, the first is dashed, the second solid:

What about images

Simple images are often used to divide sections in web pages. Is there a way to incorporate an image in the <hr> tag? Yes it is, but it isn't so easy.

The first option I've tried was the background-image property. Surprisingly enough, it works in all three browsers, yet with some caveats. Take a look at the following example:

It looks great in Mozilla, where only the image is visible, however the result is not so good in IE and Opera, because these two browsers display a border around the image (see also note 1.3). Unfortunately, I have found no way to hide this border.

Because I did not find a workaround, I've added a div in the source code:


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

and the following CSS rules:


      div.hr {

        height: 15px;

        background: #fff url(hr1.gif) no-repeat scroll center;

      }

      div.hr hr {

        display: none;

      }

The result is perfect in all three browsers now:

Conclusion

The above method, i.e. wrapping the <hr> in a <div> of a particular class and hiding the <hr> in the style sheet seems to be the most flexible solution. The standard horizontal rules are visible in an unstyled document (for older browsers and handhelds), while in a styled one you can style them as you like. However, pay attention to the following:

Background images are not printed by default in most current browsers. So if you use a background image for your rules for screen, don't forget to define different style in the print style sheet.
While the simple <hr> element has some initial top and bottom margins in most browsers, it may lost them if you wrap it in a <div>. Thus setting the top and/or bottom margin for the outer <div> may be a good idea.

Notes

Adam Kuehn sent me his observations on Mac (Thanks, Adam!):
1. Example 1: Fails to render at all in NN6. IE5 shows 2px-high grey rectangle.
2. Example 2-5: Good in both browsers, although NN6 has all of them at 80% width, while IE has them extend the width of the text.
3. Example 6: Good in NN6 (= three "cloverleaf" images). IE5 shows only a default grey hr about 12px tall, 80% width, with no border. The images are not displayed at all.
4. Example 6 w/ workaround: Good in both browsers (= three "cloverleafs").
The reason why IE5 on Mac shows a grey rectangle in the examples 1 and 6 (see Adam's observation above) is probably the transparent value of the color property. Although it is not a valid value (only the backgound-color can be transparent), it works in IE on Windows and that's why I used it. However that's another argument for the last solution — hr wrapped in a div.
Craig Saila sent me a link to his Web Building Tips, where you can find another useful information about styling horizontal rules and much more.

Your comments and suggestions are welcome at marek@sovavsiti.cz.

Go Top

CSS Workshop home • Recommended reading