IE9: Linear gradients remove border-radius and inset box-shadows

Microsoft does not support IE9 anymore, and neither do we.

When you add a linear gradient to an element, IE9 removes all border-radius and inset box-shadows. This is because you probably are doing linear gradients with this weirdo Microsoft filter:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0A284B', endColorstr='#135887');

filter hijacks the rendering of the entire element box, so you're out of luck. IE9 doesn't support CSS gradients.

A forward-looking workaround is to not use gradients and emulate your gradients with box-shadows instead. Use a wide spread inset shadow on a plain background color and the result will look much like a gradient. This will make the box appear in a plain color in IE8.

So don't get fooled by IE9's half-assed support of many new CSS attributes - it's still the piece of shit you always hated.

Henning Koch Almost 12 years ago