Is there a way to get border-radius and gradient backgrounds in IE?

Question

I am wondering if there is any work-arounds using javascript or whatever to get IE to show border-radius or gradient background?

Answer 1

You don't need to use jQuery for rounded corners, there are solutions that will make browsers behave well even in the event of javascript being disabled.

Check out http://css3pie.com/, provides a pretty simple solution (htc file) for making this work. As monn indicated IE9 gradient and radius don't work together. Css3Pie is intended to let you dev with css3 markup but provides backups for IE back to IE6.

There's also css3please and compass (for ruby).

This issue has recently been discussed in the HTML5 Boilderplate issue queue (HTML5 Boilerplate is a well-vetted collaboration to bring together the best techniques in modern web markup as a starting point for any platform). https://github.com/paulirish/html5-boilerplate/issues#issue/354

Here's a demo of the problem & solution: http://frugalcoder.us/post/2010/09/15/ie9-corner-plus-gradient-fail.aspx

Answer 2

jquery for at least the radius / corners item.

For gradient backgrounds see this.

Answer 3

This is quite new: https://github.com/bfintal/jQuery.IE9Gradius.js

Just include the script last in your head tag and it should handle the rest. See readme notes

Answer 4

I came across this by looking for fixes to using 'gradients and border-radius' in IE9. And yes while its true you can now use both in IE9, you sadly cannot use them together.

The issue is documented in a a few places:

• http://abouthalf.com/2010/10/25/internet-explorer-9-gradients-with-rounded-corners/
• http://frugalcoder.us/post/2010/09/15/ie9-corner-plus-gradient-fail.aspx
• IE9 border-radius and background gradient bleeding

The issue seems to be related to border-radius not playing nice with IE's old filter gradients. Sadly the release of IE9 did not bring proper CSS gradients.