jQuery: rounded corners and CSS

Internet Explorer 8 and lower doesn't support CSS rounded corners obtained by using the border-radius property. For that reason, developers use a simple technique: they stack several different elements one on the top of the other and apply a different background image on each element, thus creating the effect of rounded corners. The major drawback of this technique is that you have to manually add these elements to the markup. Fortunately, we can automate this process using jQuery. Let's see how.

This is our initial markup structure:

<div id="test">...</div>

And this will be our final structure after applying jQuery:

<div id="test">

  <div class="top-right">
  
    <div class="bottom-left">
    
      <div class="bottom-right">...</div>
    
    </div>
  
  </div>

</div>

Here's our CSS styles:

#test {
 width: 20%;
 background: #a40 url(top-left.gif) no-repeat;
 color: #fff;
 font: 76% Arial, sans-serif;
 line-height: 1.3;
}

div.top-right {
 height: 100%;
 background: transparent url(top-right.gif) no-repeat 100% 0;
}

div.bottom-left {
 height: 100%;
 background: transparent url(bottom-left.gif) no-repeat 0 100%;
}

div.bottom-right {
 height: 100%;
 background: transparent url(bottom-right.gif) no-repeat 100% 100%;
 padding: 1em;
}

Each rule inserts one of the following four background images:

Instead, this is the jQuery code that makes use of wrapInner() to accomplish its task:

$(document).ready(function() {

  var topRight = '<div class="top-right"></div>';
  var bottomLeft = '<div class="bottom-left"></div>';
  var bottomRight = '<div class="bottom-right"></div>';
  
  $('#test').wrapInner(topRight).find('div.top-right')
  .wrapInner(bottomLeft).find('div.bottom-left').
  wrapInner(bottomRight);
  

});

You can see a demo below.

Demo

Live demo