Chrome, Firefox, Mozilla and Safari 3 have all implemented this property but with the vendor extensions added like the CSS box-shadow property as mentioned in an earlier blog post.

The actual property for the above browsers is specified like so:

• Chrome
• Safari
  • webkit-border-radius: 3px;
• Firefox
  • moz-border-radius: 3px;
• Standard
  • border-radius: 3px;

The property actually takes 2 length values that basically put define the “slope” of each corner. For example if only one value is used or the two values are the same the “slope” of each corner would be a quarter circle. If the 2 values are different the corner is more of an ellipse shape.

It is also possible to apply the property to individual corners. Again we must specify different vendor extensions for each browser:

• Chrome
• Safari
  • -webkit-border-top-left-radius
  • -webkit-border-top-right-radius
  • -webkit-border-bottom-left-radius
  • -webkit-border-bottom-right-radius
• Firefox
  • -moz-border-radius-topleft
  • -moz-border-radius-topright
  • -moz-border-radius-bottomleft
  • -moz-border-radius-bottomright

We can use these wonderful features now! There is no need to wait around. If the above doesn’t fit your needs, here’s a list of 25 rounded corner techniques, choose the best one that fits your project. Good Luck!.



As soon as we started playing about with the PNG fix script(s) we knew it wasn’t really going to fit our needs. We had used a lot of images and it was slow, not only that we were getting sporadic Javascript errors, all-in-all, not a very nice experience. So we decided, like that voice in our head was telling us at the beginning ([spooky voice] use non standard properties, its oookkkaaayy) to totally change track and use box-shadow.

Turns out that box-shadow its actually well supported in modern browsers: Chrome, Firefox, Opera, Safari all support this property but with added vendor extensions, apart from Opera which fully supports the standard CSS box-shadow property. For the rest we have to specify vendor prefixes for the property like so:

Chrome, Safari:
webkit-box-shadow: 0px 3px 5px #000;

Firefox:
mox-box-shadow: 0px 3px 5px #000;

Standard:
box-shadow: 0px 3px 5px #000;

This instantly solved most of our problems and made our development faster and leaner. For IE7 and above we serve the CSS file that uses transparent PNGs, and for the rest we rely solely on the box-shadow property to create excellent looking and natively scalable drop shadows. For IE <= 6 we just don’t use any background images, they still get a usable website and we don’t have to mess about with PNG fix scripts.

We have learned that its much more enjoyable and rewarding to work to the highest common denominator instead of the lowest all the time. This only works so far however and you should really only use non-standard features for embellishment and design purposes, but since that is what CSS is for it is a perfect match.