PM Photo & Computer Services
Web Site Design and Business Products

CSS-3 box-shadow: Browser Dependent

Return to Problems & Solutions index page

sample of corner-radiusA drop shadow add some nice effects to elements on your page, but it's not available for all browsers, at least not yet.

Using the Moz and Webkit style or the plain css-3 style will result in different results depending on the browser.

Using the Moz & Webkit style works in FireFox 3.6, Chrome 7.0 and Safari 5.02 but doesn’t work in Opera 10.54 or IE9.

Using the CSS-3 style “border-radius” works in IE9, and Opera, but not in FireFox, Chrome, or Safari. Nothing works in IE8.Using both code styles in my style sheet made the box shadow work in IE9, FireFox, Safari, Chrome, and Opera. See the sample illustration (left):

A: No box-shadow style

B: -webkit-box-shadow:8px 8px 10px #900;
   -moz-box-shadow: 8px 8px 10px #900;

C: box-shadow:8px 8px 10px #900;

D: box-shadow:8px 8px 10px #900;
   -webkit-box-shadow:8px 8px 10px #900;
   -moz-box-shadow: 8px 8px 10px #900;



Style Explanation


box-shadow:  H   V   Blur  #Color;

H = Horizontal length of the shadow (positive value for right  shadow, negative value for left shadow)

V= vertical length of the shadow (positive value for bottom  shadow, negative value for top shadow)

BLUR = Blur radius (value 0 = no blur, positive numbers increase the amount of the blur.

#color = The color of the shadow



Go to the link, copy the URL and try it in your browser to see if it supports any variation of the box-shadow property. http://www.pmphoto.us/test/box_shadow_test_page.htm