In this tutorial we will be looking at styling the hr tag.

The amount of CSS attributes you can actually apply to the hr tag is limited.

• Border
• Color
• Background-color
• Margin
• Padding
• Width
• Text-align

Color

Some browsers look at the color to determine the color of the seperator while others use background-color, so you must specify both. For example Firefox uses background-color and Internet Explorer uses color.

hr {
color: #f00;
background-color: #f00;
}

This makes the separator red.

Height

To specify the height of your separator you must use height, not line-height. Height can be specified using %, px or em.

hr {
color: #f00;
background-color: #f00;
height: 3px;
}

Border

In Firefox you may notice that it has some shading to turn this off you just need to remove the border from the separator.

hr {
color: #f00;
background-color: #f00;
height: 3px;
border: 0;
}

Padding/Margins

Padding has no effect in IE, but does work in Firefox and will add on the padding to your original height.

Margins work like you would expect them to work.

Width

Width works as width does, set using %, px or em.

Text-align

Text-align only works with IE not Firefox.

HR Alternative

There is an alternative that is much more ideal for styling that works on browsers and screen printers.

Basically what we do is put an hr tag within a div and make the whole div a divider.

<div class=”hr”><hr /></div>

Then for the CSS we would do something like this:

div .hr {
background: #fff url(image.jpg) top center no-repeat;
height: 10px;
}

div .hr hr {
display: none;
}

The hr class sets a background image on the div which we can’t do using just an hr. The height just makes the image display properly (if you are using an image that high).

Then we set the hr tag to be hidden, this will mean our background image can be seen and look pretty.

Screen readers will ignore the display: none and show the hr tag, which means it will be perfectly formatted.

---