I was cleaning up a template on the site I work on and noticed that I was using a div to style horizontal rulers rather than using HR tags. I seem to recall having a hard time styling HR's in the past, which is why I started using divs instead. A search on Google at the time confirmed that other site developers were doing the same thing.

Getting back to my template today, however, I hated the idea of the use of divs for hr's. Our programmers regularly use HR tags and I wanted some consistency with how we handle those separators and I hated the chunky chiseled look of the bevelled HRs.

I found that this set of rules for the HR tag seems to give consistent results in Firefox and IE.

hr {
height: 1px;
background-color: #ddd;
color: #ddd;
border: none;
padding: 0;
margin: 1em 0;
}

The background color does it for Mozilla browsers and the color rule does it for IE. The result is this horizontal rule:

Works for Safari and the version of Opera I'm using as well. Am sure it breaks in some other browsers, but IE 6 and Netscape 7 are our corporate standards.