The recommendations seem to be to either wrap the HR in a div and styling that, or just simply work around it by not using images. But of course it can be done, and here’s how:

We start with some nice clean code for all the “alternative” browsers:

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

This seems to work for all standards compliant modern browsers. I’ve tested it on Opera, Safari & Firefox. However, it does not work on Explorer. IE treats the element as inline and demands a border around it and a minimum height of 1px.

IE supports very basic generated content with the list-style-image setting when combined with display: list-item. This is what I’ve used to get around the limitations.

Add this into conditional comments (or hacks if you prefer) to shift the element out of the way and insert a bullet picture in the resulting space:

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

My implementation here has the limitation of demanding that the image you use is equal to the width of the text area, but this should be easy to get around or customize.

The border setting can be replaced with a color: #fff;. To kill the default border you must set either one to the background color. Possibly it might be shifted out of hidden overflow but I have not tried it.

You can view a live example here.

Updated – 16. 1. 2007:

I’ve updated this entry and the example with the improvements suggested by Már. There are no longer any limitations on this technique.

Fyrir ykkur sem notið ennþá Windows er það vert að taka það fram að IE7 er alls ekkert óhollur fyrir kerfið ykkar. Þrátt fyrir að við vefnördar séum að agnúast út í hann er hann samt töluvert betri en IE6. Hann er einfaldlega ennþá ófullkomnari en aðrir vafrar og því heldur hann aftur af þróun vefsins.

Ykkur er alveg óhætt að setja upp IE7 nú þegar uppfærslan er komin. Ég mæli samt sterklega með því að setja líka upp, og nota frekar Firefox eða Opera.