CSS3 Border Radius and Round 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
As previously mentioned in An introduction to CSS3, not 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)

The ability to have rounded corners without using images has been something long saught after, removing the need for creating corner images with appropraite backgrounds which, at best of times, was a very time consuming task. Now with CSS3 (browser permitting..) we can create rounded corners in just a few lines of code.

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

  1. CSS3 Border Radius (Collectively)
  2. #my_CSS3_id {
  3.   border: 5px solid #c4c8cc;
  4.   border-radius: 15px;
  5. }
 

Round Corners with CSS3 (Individually)

This of course does not have to be done collectively! It is possible to round corners individually.

This is a panel set with a 5 pixel standard border and a 20 pixel radius on two individual corners and 10 pixel radius on one corner.

Corners go from top-left, top-right, bottom-right, bottom-left.

  1. CSS3 Border Radius (Individually)
  2. #my_CSS3_id {
  3.   border: 5px solid #c4c8cc;
  4.   border-radius: 20px 0 20px 5px;
  5. }
 

The Zen Elements CSS3 Series

Thank you for reading!
@zen