Handling the HR Tag

I popped this idea into the latest Design View, but I figure it’s probably worth mentioning it here too.

If you’ve ever fiddled with styling the venerable HR you probably still have the fingernail marks on your eyeballs. For what looks like such a simple little tag, it certainly has some of the loopiest cross-browser CSS implementation. Some browsers consider it a foreground (namely IE), others think it’s a background (FireFox/Moz) while other aren’t really committed either way.

Annoying enough for sure, but the final blow is delivered via IE’s take on the HRs ‘background-image’, in which it insists on adding a milky grey line to any background image. The image below shows a blue dashed ‘true’ border (marked with the ‘X’) and the grey ‘pseudo-border’ wrapping the background.


To my knowledge no-one has ever come up with a way of removing this line, rendering the HR ‘background-image’ essentially useless.

So rather than trying force CSS to do what it can’t, I’m using JavaScript to do the dirty work.

The method I’ve used is demonstrated and explained on this example page, which also shows a selection of some of the creative interpretations employed by various browsers.

The other weird little thing I discovered in my excursions was a FireFox bug which causes it to render rounded corners on it’s HRs if you add the ‘noshade=’noshade” attribute (I know, you shouldn’t anyway). I’ve whipped up a quick demo page for this interesting new feature here.