Styling the Horizontal Rule <hr>tag using CSS

The <hr> tag (horizontal rule) can be styled easily using CSS to avoid the ugly raised grey line of the standard <hr> tag. As usual, IE is the browser that causes the problems.

All the main browsers allow the width and height setting for the <hr> element.

To change the colour of the horizontal rule, it is necessary to use both the color property (for IE) and the background-color (for Opera and Firefox).
So to create a green horizontal rule of 2 pixels which goes across the whole width of the page you simply require the following CSS:

hr { color: #7FA423;
background-color: #7FA423;
height: 2px;
}

---

 

In order to style the <hr> to get a dotted or dashed line, make use of the border element. In Firefox, all that is necessary is:

hr { border: none;
border-top:dashed 2px #7FA423;
}
Unfortunately, IE displays the dashed line, but also puts the horizontal rule beneath it in standard grey.
To remove this simply tell IE also to color the <hr> the same colour as the background to your page (in this example, white).

hr {

border: none;
border-top: dashed 2px #00CC33;
color: #ffffff;
background-color: #ffffff;
}

---

 

This works in Opera, Google chrome, Safari, IE^, IE7, IE8, Firefox