Russ Weakley
23-Nov-02

The <hr> element is self-closing, which means that there is no end tag. It causes a horizontal rule to be displayed by browsers. The amount of vertical space inserted between a rule and the content that surrounds it depends on the browser.

So, what if you want to get rid of the shading that is displayed as a default for the <hr> element in some browsers? Is it possible to style an <hr> element so it works across all modern browsers?

The answer is at css-discuss: "Internet Explorer uses the "color" property, which is incorrect. The "color" property correctly applies to the foreground text color, not the background color. However, Mozilla (Netscape) and Opera use the background-color property. In browsers like Opera and Mozilla, you would still have the border of your HR showing, which you may not want. To get rid of that border, set the border to zero".

hr
{
color: red;
background: red;
border: 0;
height: 1px;
}

Adding space around the <hr> element

You can also define the space above and below the <hr> using margins. For example, if you wanted a standard charactyer return space before the element and double this space afterwards, you could add the following declaration.

hr
{ color: red;
background: red;
border: 0;
height: 1px;
margin: 1em 0 2em; }

Note that there are only three values stated for the margin property. This will apply a 1em margin above the <hr>, no margins on either side, and a 2em margin below.