Easy CSS rounded corners

Maricris Nonato -

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%;
}

Enclose your desired content like this:  YOUR DESIRED CONTENT HERE

SAMPLE HERE