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.
