border-radius and box-shadow support across browsers

Posted May 16th, 2011 in HTML and CSS

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.

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.