Styling Horizontal Rules with CSS

Tip of the day… don’t waste hours trying to style Horizontal Rules consistently in different browsers. Instead wrap your HR in a div, set the HR to

display: none

and style the surrounding div instead.

div.horRule {  height: 1px;  border-top: 1px solid #E5E5E5;  margin-top: 3px;  margin-bottom: 3px;  margin-left: 10px;  margin-right: 10px; } div.horRule hr {  display: none; }

If a user is browsing your site with a device that doesn’t support CSS then they’ll still see the standard HR.