Advanced Search

CSS3 Chrome rounded box-shadow inset fix

/ Published in: CSS
Save to your folder(s)
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.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.