CSS: Style your <hr> tags with a background image

I find <hr> (horizontal rule) tags to be a nice semantic way to separate or break up content on a page. To give them some style, you can replace them with a nice background image.

By default, <hr> tags are pretty ugly and basic, a line at their simplest or some 3D bordered monstrosity at worst. Using the CSS background property you can specify an image, just make sure to set the height to be at least that of the image, and set the border to none.

hr {
	background:url(spiral-shape.png) no-repeat top center;
	height:42px;
	border:none !important;
}

As usual, Internet Explorer (7 and less) doesn’t play nice so you need to set up some IE specific CSS (if you care).
I always use a separate IE css file included with a condiional as follows:

<!--[if lte IE 7]>
	<link rel='stylesheet' href='ie.css' type='text/css' media='screen' />
<![endif]-->

And the IE hack as follows (Props to NeatlySliced):

hr {
	display:list-item;
	list-style:url(spiral-shape.png) inside;
	filter:alpha(opacity=0);/* gets rid of horizontal bar to right of image */
	width:0;		/* prevents tiling */
	margin-top:-10px;
}

7 Responses to “CSS: Style your <hr> tags with a background image”

  1. Good post. I was going to mention the IE inconsistencies with hr tags, but it looks like you got that covered as well!

    • Thanks Tim – glad to see you over at our blog this time! 🙂

  2. Nice Trick 🙂

    • Thanks Anwar – glad you like it!

  3. nice

  4. Though this is an old article, thanks a ton, very very helpful information! Especially after spending forever looking for a solution to this problem.

  5. Thank You From Argentina 🙂

Leave a Reply