border radius not working on IE, what library or css hack do I use

Question

I want to style some forms on my app in IE8 but I always have a problem with css3. I already tried with css3pie but I'm not very satisfied. I would be very happy if there is a jQuery plugin to do that. I wonder if it is possible to trick IE8 with Something like.

<meta http-equiv="X-UA-Compatible" content="IE=9" />

If someone's solved this please let me know. Thank's.

Answer 1

Check this out: Rounded Corners in Internet Explorer

At the bottom there are some links to different solutions.

Answer 2

Here are your options:

• Use some sort of javascript-based pseudo-compatibility library (such as css3pie). Since these libraries basically resort to hacks in a controlled way, your results are going to be somewhat correct, but not necessarily perfect.
• Use a different / additional stylesheet for IE8 (and earlier), adding rounded borders using old-school methods (images for the corners, with some wild floating and positioning tricks; or worse, abusing list item bullet points for rounded corners).
• Use old-school methods for all browsers - this will work, but you will miss out on smoothly-scaled vector corners (ie, it will pixelate when the user zooms in).
• Make a design that looks good enough without the rounded borders and let IE8 degrade gracefully. (This is actually the canonical solution as envisioned by the designers of HTML and CSS.)

Some notes:

• IE8 (and earlier) is not the only browser that doesn't implement border-radius; Opera Mini, a fairly popular mobile browser, hasn't implemented them yet, and both Desktop Opera and Opera Mobile didn't include them either until version 10.
• Hacks that work on IE8 may not work on IE6 and 7, so if you choose that path, be prepared to manage four different stylesheets instead of one.
• Many of the usual old-school rounded corner hacks are hard or impossible to implement in fluid layouts, because they rely on absolute positioning and knowledge of other elements' sizes.
• Javascript-based solutions obviously break if the user has Javascript disabled.
• Over time, people will move to newer IE versions. IE8 is the most prominent version right now, but that's not going to last forever.

Answer 3

You could try this https://github.com/brandonaaron/jquery-cssHooks

Haven't used it for border-radius, but other css3. You would have to use borderradiusalt.js and apply it like this:

$('#myElement').css('border-radius', '3px 3px 3px 3px');

You also have to put border-radius.htc in the web root(eg where index.html is located) or the page that uses the js.