With CSS3 being rolled out to major browsers it’s time to learn about some of its many features. While IE doesn’t support much (if any) CSS3, Microsoft has announced that it will be supported in IE9. One of my favorite features of CSS3 is the ability to create rounded corners using pure CSS.

In this article I’m going to use images as my examples, so that my friends using Internet Explore will be able to see what they’re missing.

Syntax for border-radius

/*Mozilla*/
-moz-border-radius: /*horizontal and vertical radii*/;
-moz-border-radius-topleft: /*horizontal and vertical radii*/;
-moz-border-radius-topright: /*horizontal and vertical radii*/;
-moz-border-radius-bottomright: /*horizontal and vertical radii*/;
-moz-border-radius-bottomleft: /*horizontal and vertical radii*/;
/*WebKit*/
-webkit-border-radius: /*horizontal and vertical radii*/;
-webkit-border-top-left-radius: /*horizontal and vertical radii*/;
-webkit-border-top-right-radius: /*horizontal and vertical radii*/;
-webkit-border-bottom-right-radius: /*horizontal and vertical radii*/;
-webkit-border-bottom-left-radius: /*horizontal and vertical radii*/;

The ones under ‘Mozilla’ will work for all Mozilla-based browsers, that includes FireFox and the ‘WebKit’ ones work in Safari and Chrome.

Examples

As you can see CSS3 can be a huge time saver, no longer will we need to cut out images to make our corners round. Again, keep in mind that not all browsers support rounded corners. In browsers that don’t, the corners will appear as normal squared corners.

3 Responses

1. 
   de.monkeyz

   Feb 28, 2010 @ 10:15 am

   The official CSS3 specification attribute is “border-radius” and works in most newer mozilla and webkit browsers.
2. 
   Patrick

   Feb 28, 2010 @ 11:33 am

   Hey de.monkeyz,

   Thank you for your comment. While your statement is true, the official attribute is “border-radius”. Browsers still require the prefix of either -webkit- or -moz-.
3. 
   de.monkeyz

   Feb 28, 2010 @ 2:39 pm

   Oh right. I swear at least one browser can use the official attribute though, although the classic moz and webkit variants are still more popular. I did find this whilst looking – http://cheeaun.com/experiments/border-radius-fun/

   Looks pretty interesting