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:
- 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
Author
