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

October 14th, 2010 Charlie Evans 7 Comments

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. By Tim Oct 17th, 2010 at 2:39am

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

    • By Charlie Evans Oct 21st, 2010 at 3:23pm

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

  2. By Anwar Javed Oct 21st, 2010 at 2:32pm

    Nice Trick 🙂

    • By Charlie Evans Oct 21st, 2010 at 3:22pm

      Thanks Anwar – glad you like it!

  3. By micheal Mar 3rd, 2012 at 12:59pm

    nice

  4. By Chase Sep 20th, 2012 at 4:26am

    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. By Adhara Diseño Web Mar 5th, 2013 at 11:38am

    Thank You From Argentina 🙂