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
SAMPLE HERE

Author

Maricris Nonato

Maricris Nonato

I turn tech ideas into websites using Ruby. I'm a budding Buddhist practitioner, passionate about health & fitness, a certified yoga teacher, and a cat fanatic!

Share

Recent posts

Tags

Advertise

Advertise here

Newsletter

Instagram Feed

Links