CODEWITHSUNDEEP
css
Martti Laine
Martti Laine

Reputation: 12985

Box-shadow not working on Webkit?

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

Upvotes: 6

Views: 6490

Answers (2)

stefanglase
stefanglase

Reputation: 10402

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:

-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);

Upvotes: 10

Esko Kumpunen
Esko Kumpunen

Reputation: 91

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);

Upvotes: 9

Related Questions