1

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

JD Isaacks
  • 56,088
  • 93
  • 276
  • 422
  • For gradients, take a look at http://stackoverflow.com/questions/213750/gradient-colors-in-internet-explorer (it's IE only, however). – Craig Jun 03 '10 at 21:05
  • What happened to the good ol' days, when we were thankful that we could do this with images and a whole lot of positioning hacks? ;-) – Dan M Jun 04 '10 at 03:54

4 Answers4

5

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:

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.

Community
  • 1
  • 1
Eamonn
  • 153
  • 1
  • 6
  • 1
    However, it did bring [SVG support, which you can use to implement gradients that play nicely with `border-radius` in IE 9](http://stackoverflow.com/questions/12211213/ie9-issue-border-radius-and-linear-gradient/12211297#12211297) – Paul D. Waite Aug 31 '12 at 08:17
0

jquery for at least the radius / corners item.

For gradient backgrounds see this.

NotMe
  • 87,343
  • 27
  • 171
  • 245
0

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

mahalie
  • 2,647
  • 20
  • 21
0

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

Benjamin Intal
  • 2,748
  • 1
  • 25
  • 26