Read more

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

Henning Koch
May 11, 2012Software engineer at makandra GmbH

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');
Illustration online protection

Rails Long Term Support

Rails LTS provides security patches for old versions of Ruby on Rails (2.3, 3.2, 4.2 and 5.2)

  • Prevents you from data breaches and liability risks
  • Upgrade at your own pace
  • Works with modern Rubies
Read more Show archive.org snapshot

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.

Posted by Henning Koch to makandra dev (2012-05-11 01:00)