CSS3 Border-Radius & Rounded Corners

Use CSS3 border-radius to make your corners rounded! In this edition of the CSS3 series, we use the third generation Style Sheet language to round the corners of our layers both collectively and individually.

Cross Brower Compatability

all current browsers support CSS3 but for those good browsers that chose to be compatible, we have two prefixes that we can work with.

The Prefixes:
-moz (e.g. -moz-border-radius) works in FireFox.
-webkit (e.g. -webkit-border-radius) works in Safari & Google Chrome. 

Round Corners with CSS3 (Collectively)

This is a panel set with a 5 pixel standard border and a 15 pixel border radius.

CSS3 Border Radius (Collectively)

#my_CSS3_id {
   border: 5px solid #c4c8cc;
   -moz-border-radius: 15px;
   -webkit-border-radius: 15px;
   }

Round Corners with CSS3 (Individually)

This is a panel set with a 5 pixel standard border and a 15 pixel border radius on two individual corners.

0. CSS3 Border Radius (Individually)

#my_CSS3_id {
   border: 5px solid #c4c8cc;
   -moz-border-radius-topleft: 15px;
   -moz-border-radius-topright: 0px;
   -moz-border-radius-bottomright: 15px;
   -moz-border-radius-bottomleft: 0px;
   -webkit-border-top-left-radius: 15px;
   -webkit-border-top-right-radius: 0px;
   -webkit-border-bottom-left-radius: 0px;
   -webkit-border-bottom-right-radius: 15px;
    }