hr styling

Posted on Sat, 2006-12-23 13:11

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=