Box-shadow not working on Webkit?

Question

Hi

I'm creating multiple borders to element using box-shadow, but they don't show at Webkit. What's wrong with this code? I'm using this four times to create shadow on each side, then border for extra border

box-shadow: 1px 1px 0px rgba(0,0,0,0.1);

Martti Laine

Answer 1

to display box-shadow in webkit browsers you have to use the following statement at the moment:

-webkit-box-shadow: 1px 1px 0px rgba(0,0,0,0.1);

To make it compatible with most modern browsers use this:

box-shadow: 1px 1px 0px rgba(0,0,0,0.1);
-webkit-box-shadow: 1px 1px 0px rgba(0,0,0,0.1);
-moz-box-shadow: 1px 1px 0px rgba(0,0,0,0.1);

Answer 2

This works well enough, but please note that best practice is to place the non-proprietary declaration last.

-webkit-box-shadow: 1px 1px 0px rgba(0,0,0,0.1);
-moz-box-shadow: 1px 1px 0px rgba(0,0,0,0.1);
box-shadow: 1px 1px 0px rgba(0,0,0,0.1);