Cross-browser CSS3 box-shadow

There is a simple way for creating cross-browser box-shadow in all modern and popular browsers including Internet Explorer (Opera only since 10.50 pre-alpha version). The essence of the solution is very similar to cross-browser border-radius, it also uses VML and behaviour.

box-shadow for modern browsers (except IE8)

You can use following code for Firefox, Safari, Chrome and Opera 10.50 pre-alpha:

.box-shadow {
  -moz-box-shadow: 10px 10px 10px #000; /* Firefox */
  -webkit-box-shadow: 10px 10px 10px #000; /* Safari, Chrome */
  box-shadow: 10px 10px 10px #000; /* CSS3 */
}

If you are using an up to date version of Firefox, Safari or Chrome, it’s enough to use just this CSS:

.box-shadow {
  box-shadow: 10px 10px 10px #000; /* CSS3 */
}

box-shadow for Internet Explorer

Download the ie-css3.htc file, put it in the same place where your CSS file, and then use this CSS code for Internet Explorer to make box-shadow:

.rounded-corners {
  behavior: url(ie-css3.htc);
}

It’s reasonable to connect this CSS through conditional comments.

Cross-browser box-shadow demo

In the following example you can see the demonstration of both CSS3 styles – border-radius and box-shadow:

• Internet Explorer support for CSS3 border-radius and box-shadow

Turn your attention on few limitations while using these solutions for IE.