How to fix IE rendering of border-radius combined with box-shadow?
css, internet-explorer
Solution
The problem only occurs when the spread of the inset shadow triggers a larger "shadow-radius" than the size of the border-radius in IE. Set the border-radius to 50px in your example and it looks the same in IE and Chrome.
If you need a bigger box-shadow spread then you can just use a border instead, at least in your examples that would do the trick. Example: http://dabblet.com/gist/5501799
Another problem you might see is that IE and Chrome render the blur of the box-shadow totally different, but I assume you're not using it in your example for that reason...
Problem
Does anybody have an idea on how to "fix" the rendering in IE 9 and 10 of a combination of box-shadow and border-radius? It's especially noticeable when using inset shadows. The radius of the shadow is very different in IE compared to webkit/gecko... In this image you can see the problem. On the left is a button with an inset box-shadow, on the right without box-shadow. (don't mind the different font-rendering) Here's the code used: http://dabblet.com/gist/5450815