Easy CSS rounded corners

I tried working on different approaches for rounded corners using CSS. I really didn't want to resort to using the old fashioned tabled layout.

What I wanted was really simple:

• It should be cross browser compatible
• it should look undistorted
• it should be easily configured

I got all that I wanted here:

1. Add the following CSS code to your stylesheet:

   .upperleft{
   width : 100%;
   margin-left : auto;
   margin-right : auto;
   
   background-color : #fff;
   background-image : url('/images/upperleft.gif');
   background-repeat : no-repeat;
   background-position : top left;
   }
   
   .upperright{
   background-image : url('/images/upperright.gif');
   background-repeat : no-repeat;
   background-position : top right;
   }
   
   .lowerleft{
   background-image : url('/images/lowerleft.gif');
   background-repeat : no-repeat;
   background-position : bottom left;
   }
   
   .lowerright{
   background-image : url('/images/lowerright.gif');
   background-repeat : no-repeat;
   background-position : bottom right;
   padding : 3% 3% 3% 3%;
   }
   

2. Enclose your desired content like this:

   YOUR DESIRED CONTENT HERE