Styling Horizontal Rules

Sometimes its recommended to replace the <hr> element with CSS only using horizontal borders of other elements, but I prefer <hr> as a section separator. <hr> makes a web page more readable even in older browsers that receive only pure HTML i.e. without CSS (style sheet).

On the other hand, if you want to make simple, unstyled <hr> to look prettier in richly styled documents than the only way is – CSS.

Which Properties Work
Various CSS properties can be applied on <hr>:

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.

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

CSS

 hr {
  border: 0;/*Require OR Optional*/
  width: 80%;/*Optional*/
  background-color:#FF0000;
  color: #FF0000; /*Require IE*/
  height:1px; /*Require Netscape and all*/
  margin-bottom:5px; /*Optional*/
 }
 hr.broad{
  height:8px;
 }

XHTML

 <hr />
 <hr class="broad" />
 <hr />

So all rules are 80% wide and should have no initial borders. And if you want to show a solid & colored line, than 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.

Result: