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

SAMPLE HERE