Styling Horizontal Rules with CSS
Oct 26. 04Tip 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.