Cross Browser Rounded Borders Using Sprites

I was reviewing techniques for rounded borders and came across this. It uses four background images for each of the corners; however, they're not using a sprite. So, we'll do it with a single sprite. Once we're done, we'll have something like this that works on all the major browsers ( IE6/IE7, Firefox, Safari and Opera ) --



First, we'll take the four corner GIF images that they have, make them transparent ( using a bitmap editor ) and then use a sprite generator to create our sprite as well as the supporting CSS. I like to use the one from Website Performance.

Next, we'll take the layered approach which means that we'll nest absolutely positioned elements in a relatively positioned container. So, the four corners, the two horizontal and vertical lines are absolutely positioned.

Here's the structure --

    <div class="b2">
     <div class="border-container">
       <div class="sprite-tl2"></div><div class="sprite-tr2"></div>
       <div class="horz-line top-line1"></div>
       <div class="horz-line top-line2"></div>
     </div>
     <div class="content">
       We're using sprites for rounded borders.  This implementation works in IE6/IE7, Firefox 2.0.x, Safari 3.1 and Opera 9.27. <a href="http://skypoetsworld.blogspot.com/">Read more.</a>
     </div>
     <div class="border-container">
       <div class="sprite-bl2"></div><div class="sprite-br2"></div>
       <div class="horz-line bottom-line1"></div>
       <div class="horz-line bottom-line2"></div>
     </div>
     <div class="vert-line left-line1"></div>
     <div class="vert-line left-line2"></div>
     <div class="vert-line right-line1"></div>
     <div class="vert-line right-line2"></div>
   </div>

and here's the CSS --

      .b2{width:20em;margin-bottom:5px;position:relative;}
     .border-container{position:relative;}
     .sprite-bl2{background: url(roundsSprite3.gif) 0 -30px no-repeat; position:absolute;width:11px;height:10px;top:0;left:0;}
     .sprite-br2{background: url(roundsSprite3.gif) 0 -70px no-repeat; position:absolute;width:11px;height:10px;top:0;right:0;}
     .sprite-tl2{background: url(roundsSprite3.gif) 0 -110px no-repeat; position:absolute;width:11px;height:10px;top:0;left:0;}
     .sprite-tr2{background: url(roundsSprite3.gif) 0 -150px no-repeat; position:absolute;width:11px;height:10px;top:0;right:0;}
     .content{padding:10px 10px;font-family:verdana;font-size:93%;}
     .horz-line{position:absolute;border-top:1px solid #EC9E3C;width:50%;}
     .top-line1{left:11px;top:0;}
     .top-line2{right:11px;top:0;}
     .bottom-line1{left:9px;top:9px;}
     .bottom-line2{right:10px;top:9px;}
     .vert-line{position:absolute;border-left:1px solid #EC9E3C;height:50%;_height:2em;}
     .left-line1{top:10px;}
     .left-line2{bottom:0;}
     .right-line1{top:10px;right:0;}
     .right-line2{bottom:0;right:0;}

It's all pretty self-explanatory. You can view the sample and the source here. Feel free to use and improve it!
Have fun!