Posted By

Shujin on 10/03/10


fix ROUNDED chrome box-shadow inset

Versions (?)

Who likes this?

3 people have marked this snippet as a favorite


CSS3 Chrome rounded box-shadow inset fix

 / Published in: CSS

So it\'s a pretty simple fix I found out whilst coding my site (ohsogeoff).\r\n\r\nBasically, Chrome hates combining both border radius and inset box shadow! So all we do to fix this is remove the inset on webkit and reverse the direction of the shadow by applying negative values.

  1. border-radius: 3px;
  2. -moz-border-radius: 3px;
  3. -webkit-border-radius: 3px;
  5. box-shadow: inset 1px 1px 1px #644823;
  6. -moz-box-shadow: inset 1px 1px 1px #644823;
  7. -webkit-box-shadow: -1px -1px 1px #644823;

Report this snippet  

You need to login to post a comment.