Posted By

Shujin on 10/03/10


Tagged

fix ROUNDED chrome box-shadow inset


Versions (?)

Who likes this?

3 people have marked this snippet as a favorite

bobbym245
jplr
gilbitron


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;
  4.  
  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.