Chris J Allen Chris J Allen - 4 months ago 6x
HTML Question

Styling horizontal rules

Is there a nicer way of styling a

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

The best way I have found, is as follows:


.hr {
background: #fff url(nice-image.gif) no-repeat scroll center;
hr {


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


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.