Horizontal Rule Height

[Dysan]

How do I get a horizontal rule (<hr>) to display at 1px in height?

[Centauri]

hr's are a strange one that haven't evolved styling-wise due to being deprecated and seldom used these days. They seem to follow the outdated box model in that stated dimensions include any borders, and FireFox uses a default 1px border, making the total height at least 2px. Setting the borders to zero and setting the 1px height works, but another issue arises. The colour of the hr itself is the background-color in FF but color in IE, so you would have to set both to the same to get the same result cross browser.

[ray326]

Most of the time the visual effect of an HR is better (or at least as well) served by a top or bottom border.

[agility]

hr {display: none;}
.hr {border-top: 1px solid #000000;}