Styling horizontal rules with CSS is fairly intuitive in IE: to change the color, use the color attribute; to change the width and heights, use the width and height attributes.

Styling horizontal rules in other browsers, however, is slightly less intuitive. To change the color of the horizontal rule, you need to change the background-color attribute. However, this still leaves an unsightly shadow effect that the now-deprecated noshade attribute once took care of. This has led many web authors to stop using the <hr /> tag altogether in XHTML, and fake it with borders on empty divs. But there is a simple solution to this problem - turn off the borders on the <hr>!

hr {border-style: none;}

Dotted-line <hr>s

To go one further and have a dotted-line <hr />, set both the color and background-color to match the color of the element it is contained within. Then add a bottom border with the desired pattern (solid, dotted, dashed, etc) to the <hr />, and viola! A dotted horizontal rule:

hr {color: #fff; background-color: #fff; border: 1px dotted #ff0000; border-style: none none dotted; }