IE10 inset box-shadow scaling with border-radius

Question

I want to add an inset box-shadow in IE10. It appears that the rounded corner is scaling larger in size relatively to the border radius applied to the input element. This doesn't happen in webkit or firefox. I can see how it would make sense to scale an outset box-shadow, but it's weird to scale an inset one.

How it should look:

How it should look

How it looks in IE10:

How it looks in IE10

Has anyone ran into this before and found a solution?

My solution was to use a 5px border with a 1px outset box-shadow, instead of using a 1px border with a 5px inset box-shadow. — Don't Wake Me Up

Jaydeep Jaydeep · Accepted Answer · 2013-04-26T15:19:27

You can refer http://www.impressivewebs.com/ie10-css-hacks/

Some test code:

.navigation ul li a {
  -moz-box-shadow: 3px 3px 3px #ffccff;
  -webkit-box-shadow: 2px 2px 7px #ffccff;
  -o-box-shadow: 2px 2px 7px #ffccff;
  box-shadow: 2px 2px 7px #ffccff;
}
@media screen and (min-width:0\0) {
    /* IE9 and IE10 rule sets go here */
.navigation ul li a {
  box-shadow: 2px 2px 17px #3a312a;
 }
}

IE10 inset box-shadow scaling with border-radius

2 Answers