Easy CSS rounded corners

 5th April 2009 by Chris

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: 
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

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

    1
2
3
4
5
6
7
8
9
10

    
    <div class="upperleft">
        <div class="upperright">
            <div class="lowerleft">
                 <div class="lowerright">
                            YOUR DESIRED CONTENT HERE
                </div>
            </div>
        </div>
    </div>
SAMPLE HERE

This solution is only good if you want to have it done via CSS. Using Javascript is another thing, but here's a very good resource to get you going in that direction: [http://www.html.it/articoli/niftycube/index.html][1] [1]: http://www.html.it/articoli/niftycube/index.html
Chris
Category: Design and CSS Tags: ,
Leave a Reply

Unfuddling
Hi, I've been busy you know. wink If you don't know yet, this site and my blog codes are hosted in . I recently moved to Git and found that they have support for private Git repositories. Below are details of my last git push.

Maricris S. Nonato on 26 Mar
Commit: e734bd6878629223c5067326471d7ec0aac7d6e4

Updated display of ads and popular content
Twitter