Box with rounded corners and shadows – fun with CSS3

by Peter

Creating boxes with rounded corners on a web page used to be a large operation. It required the making of  images representing rounded corners, with the same colors as the box and the background, and then positioning them in the corners of the box using four DIVs, each with one image slice as background. Not very difficult, but time consuming.

With CSS3 and browsers supporting it, the same task is incredibly easy and requires very little code. Here is the basic code for a box with rounded corners using CSS3 (we have to use extra lines for webkit and mozilla browsers):

1
2
3
.box { border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px; }
Box with rounded corners

With a little extra code for color and such, we get the box on the right. Extremely easy – so now everybody can have neat, rounded boxes on their web pages or blogs.

Also, CSS3 compliant browsers support box-shadows and text-shadows. And they can be used alongside the rounded corners easily. The basic code for a box with rounded corners and shadows is simple too:

1
2
3
4
5
6
.box2 { box-shadow:5px -5px 10px #000;
             -webkit-box-shadow:5px -5px 10px #000;
             -moz-box-shadow:5px -5px 10px #000;
          border-radius:20px; 
        -moz-border-radius:20px; 
                -webkit-border-radius:20px; }
Box with rounded corners and shadow – if you don’t see it, it’s time to change browser!

With a little extra formatting this gives us the second box on the right. Pretty neat and simple? (Here is a demo-page with these two boxes and the CSS and markup.)

You can also make individual corners rounded for webkit and mozilla browsers:

1
2
3
4
-moz-border-radius-topleft  / -webkit-border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radiu

And if you can’t see the rounded corners and the box shadows, don’t blame me. Blame your browser! You simply have the wrong browser (probably Internet Explorer), and need to download and use Firefox, Opera 10.5, Safari or Chrome!

Related Posts:

Leave a Comment