Border Radius

The CSS3 border-radius property is an easy way to give an element rounded corners, without having to use corner images or multiple div tags. We'll go through some examples of how to use the border-radius property:

An image with rounded corners:

  1. .rounded1 {
  2. border-radius: 20px;
  3. }
  1. <p class="center"><img class="rounded1" alt="" src="images/4720lg.jpg"></p>
The Results

Set Corners Separately:

You can also set each corner separately. The four values for each radii are given in the order top-left, top-right, bottom-right, bottom-left. If bottom-left is omitted it is the same as top-right.

  1. .rounded2 {
  2. border-top-left radius: 20px; /*each corner can be defined separately*/
  3. border-top-right radius: 0;
  4. border-bottom-right-radius: 20px;
  5. border-bottom-left-radius: 0;
  6. }

  7. ...or...
  8. .rounded2 {
  9. border-radius: 20px 0 20px 0; /*define all corners on one line*/
  10. }
The Results

Vendor Prefixes:

While the border-radius property has now become widely supported in modern browsers and mobile devices, if you need to support older browsers you may want to use the vendor prefixes:

  1. .rounded1 {
  2. -webkit-border-radius: 20px; /* Safari 3-4, iOS 1-3.2, Android 1.6- */
  3.    -moz-border-radius: 20px; /* Firefox 1-3.6 */
  4.         border-radius: 20px;
  5. }