Chrome has an inset box-shadow bug

nope1 Chrome has an inset box shadow bug

Rendering fancy buttons in CSS3 is completely feasible with modern browsers. It’s less expensive on page load and you can accomplish popular button treatments with CSS border-radius, gradients and box-shadows.

I was building a button the other day that used a dark border and inset box-shadow to give it a slight inner glow. Guess what? When combined with border-radius, Chrome for Windows renders inset box-shadow incorrectly. The inset shadow ends up on the outside of the round corners. Sucks. Solution after the jump.

My solution? I replaced the 1px inset shadow with a standard 1px border that matched the color I used for the inset. Once that was in place I used box-shadow to create the outer border. If you center your box-shadow on the button and give it a size of 2px you will basically get a pin line of shadow surrounding the button. Make sure to adjust the shadow color to be a little darker to compensate for the shadow’s transparency.

nope2 Chrome has an inset box shadow bug

Make sense? I’ll post the complete code for the button here:

a {
color:#ffaf2c;
border: 1px solid #7f2714;
font-size:14px;
padding:4px 10px;
-moz-border-radius:14px;
-webkit-border-radius:14px;
border-radius:14px;
-webkit-box-shadow: 0px 0px 2px #1a0807;
-moz-box-shadow: 0px 0px 2px #1a0807;
background-color:#651515;
background-color:rgba(122, 7, 18, .30);
margin-right:5px;
}

IE will just get boring square buttons with this code. To support IE you will need to send them them the background images.

3 Responses to Chrome has an inset box-shadow bug

  1. Adam says:

    For IE you can use CSS3PIE and get these effects in IE TODAY! http://css3pie.com/ Enjoy!!!

  2. Paul Irish says:

    This is a bug with the Skia graphics library that is leveraged by Chrome. It’s reproduceable in Windows and Linux…

    but as of today (!!!), it’s fixed and available in the dev channel! (It’ll be between 4 and 10 weeks when it goes to everyone in the stable channel)

    More details: http://paulirish.com/2011/chrome-inset-box-shadow-bug-fixed/

  3. Pingback: CHROME HAS AN INSET BOX-SHADOW BUG | HTML CSS3

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>