border-radius and box-shadow support across browsers

This post is a reference sheet I needed for myself to show which browsers support the CSS3 box-shadow and border-radius properties, which require vendor prefixes, and which have no support at all.

box-shadow / border-radius support

The border-radius support and box-shadow support columns indicate what property name is required for the property to work in that browser. For older versions of Firefox the are prefixed by -moz, for older versions of webkit they are prefixed with -webkit.

Browser and version border-radius support box-shadow support
Chrome border-radius box-shadow
Firefox 4.0+ border-radius box-shadow
Firefox 3.6 -moz-border-radius -moz-box-shadow
Firefox 3.5 -moz-border-radius -moz-box-shadow
Firefox 3.0 -moz-border-radius No support
Internet Explorer 9+ border-radius box-shadow
Internet Explorer 8 and earlier No support No support
Mobile Safari 4.0.5 (iOS 4) border-radius -webkit-box-shadow
Mobile Safari 4.0.4 (iOS 3) -webkit-border-radius -webkit-box-shadow
Opera 10.50+ border-radius box-shadow
Opera 10.10 and earlier No support No support
Safari 5.0 border-radius -webkit-box-shadow
Safari 4.0 -webkit-border-radius -webkit-box-shadow

Mobile Safari was tested on iOS3 and iOS4 using the iPad and iPhone simulators on a Mac, and also on Android 2.2 (which reports it as 4.0 and 533.1). The version on Android 2.2 was like 4.0.5 where it needed the vendor prefix for box shadow but not border radius.

Cross Browser Usage

In order to ensure the greatest cross browser usage, set up border-radius and box-shadow like so:

-moz-border-radius: [radius settings here];
-webkit-border-radius: [radius settings here];
border-radius: [radius settings here];

-moz-box-shadow: [shadow settings here];
-webkit-box-shadow: [shadow settings here];
box-shadow: [shadow settings here];

Replace [radius settings here] with the exact same settings for each; and the same for [shadow settings here].

Note: I used the HTML5 DOCTYPE when testing to create the above table.