Styling a horizontal rule using CSS

If you have ever wanted to style a horizontal rule but had unexpected results, read on!

The more I learn about clean xhtml coding, the more I want to learn to style the elements within the xhtml instead of adding unnecessary page elements. I recently worked on a site where I wanted to stylize a <code><hr /></code>. I had a hard time finding one that was truly cross browser with consistent results. This requires a bit of extra code, but it’s a small price to pay for getting something with high compatibility.


<div class="hr"><hr /></div>

CSS: {
height: 15px;
background: #fff url(hr1.gif) no-repeat scroll center;
} hr {
display: none;

Tip was found at


Sign up today to stay informed with industry news & trends