Styling horizontal rules

Question

Is there a nicer way of styling a <hr /> tag using CSS, that is cross-browser consistent and doesn't involve wrapping a div around it? I'm struggling to find one.

The best way I have found, is as follows:

.hr {  
  height:20px;  
  background: #fff url(nice-image.gif) no-repeat scroll center;  
}  
hr {  
  display:none;  
}  
<div class="hr"><hr /></div>

Answer 1

If you set display to block it should behave more like a <div>.

Your answer you should remove hr altogether and just use the div

Answer 2

You could apply the background image to the bottom of the preceding element, perhaps with a bit of extra padding. That way you can get rid of any surplus / non-semantic markup.

Answer 3

The classic way of doing this is creating a wrapper around the <hr> and styling that. But I have come up a CSS trick for image replacing the element without the need for extra markup:

For non MSIE browsers:

hr {
   border : 0;
   height : 15px;
   background : url(hr.gif) 0 0 no-repeat;
   margin : 1em 0;
 }

Additionally for MSIE:

hr {
   display : list-item;
   list-style : url(hr.gif) inside;
   filter : alpha(opacity=0);
   width : 0;
}

See entry on my blog for further info and an example of the trick in action.