Rounded (image) corners using jQuery

Question

I'd like to apply rounded corners to several blocks using the single image (above). I know there're corners plugins available but I need to use images for max compatibility. So, as I know, the only way is to create wrappers around the blocks to apply the corner images:

<div class="wrapper-4"> <!-- top-left corner -->
  <div class="wrapper-3"> <!-- top-right corner -->
    <div class="wrapper-2"> <!-- bottom-left corner -->
       <div class="wrapper-1"> <!-- bottom-right corner -->
          <div class="content"> <!-- Content Block -->
            I feel squeezed!
          </div>
       </div>
    </div> 
  </div>
</div>

Ugly I know, but its the only way I guess, using jQuery to create the wrappers will make it less ugly I guess. So what I need help with is to understand how exactly will the CSS will be created around these DIVs and image (above) using the sliding doors method so the corners would show up well, especially in IE. I've created buttons using the sliding doors method, but never tried this.

Appreciate any help. Thanks!

Answer 1

There's a JQuery Plugin for that that may help: http://plugins.jquery.com/project/corners However, I'm not sure whether that will work for the gradient to the bottom of the element.

Answer 2

To continue using the way you know you could try something like:

$(div.content).each(function() {    
    $(this).wrap('<div class="wrapper-4"><div class="wrapper-3"><div class="wrapper-2"><div class="wrapper-1"></div></div></div></div>');
});

Answer 3

I need to use images for max compatibility

Great, it does work in IE8!

lol...