CSS3 box-shadow blur in IE9

cssinternet-explorer-9

Has anyone else noticed that IE9's "standard" implementation of CSS box-shadow differs from other browsers? Whenever I use box-shadow and set a blur value, IE9 seems to render the blur at about half the value that Firefox, Safari, Chrome, and Opera do.

Is there any way around this? And what exactly is the point of IE9 supporting box-shadow as a standard property if it doesn't look the same as box-shadow in all the other browsers?

(Technically, Safari 5 still only supports -webkit-box-shadow and not the standard box-shadow property, but it also happens to render identically to box-shadow in Firefox 4, Chrome 11, and Opera 11. IE9 is the odd man out, despite supporting the same standard box-shadow syntax).

Best Answer

Are you using the right syntax?

-webkit-box-shadow: 2px 2px 16px #2b2b2b;
-moz-box-shadow: 2px 2px 16px #2b2b2b;
box-shadow: 2px 2px 16px #2b2b2b;