How to create a rounded corner box plugin with jQuery

Recently, we have redesigned one of our projects. The task was to make the web application to look and act more like Web2.0 app. New design looked great and surely it had lot's of rounded corners.

You can download jQuery Rounded Corners plugin.

First, rounded corners were done using CSS, but it got our code cluttered and it introduced a lot of unnecessary HTML markup. Since we had full control of our target audience's browsers and we were sure that they had JavaScript enabled browser we chose jQuery to do all the dirty work. All we have to do to define a box/table/anything to be in a rounded box is to give it a class "boxed" and the rest is done with jQuery.

Here is the final rounded corners jQuery plugin code:

(function($){
  $.fn.extend({
    box: function() {
      return $(this).each(function(){
        $(this).wrap('<div class="box"><div></div><div class="tl"></div><div class="tr"></div><div class="bl"></div><div class="br"></div></div>');
      });
    }
  })
})(jQuery);

CSS looks like this:

/* -- Rounded Box -- */ 
.box{position:relative;background-color:#eee;margin-bottom:25px;padding:10px;} 
.box .tl,.box .tr,.box .bl,.box .br{position:absolute;width:10px;height:10px;} 
.box .tl{background-image:url(images/box-tl.gif);top:0;left:0;} 
.box .tr{background-image:url(images/box-tr.gif);top:0;right:0;} 
.box .bl{background-image:url(images/box-bl.gif);bottom:0;left:0;} 
.box .br{background-image:url(images/box-br.gif);bottom:0;right:0;} 
.box .bg-white{background-color:#fff;padding:10px;}

Tweet