Question

I’m trying to use Jquery.corner() to rounded my div’s corners.

However in IE the corner background is the parent’s div color (body color: #C70036;). I’m using a background-image so as you can see in the yellow boxes (here) is not working properly.

After search for a while I’ve found this:

$("myDiv").corner("cc:#fff round 20px");

But the background is not just 1 color so I can’t use “cc:#000000”. Do you know any way make the corner background be transparent?

Answer 1

You will always have this problem as long as you use these jQuery tools to simulate rounded corners in IE. The problem is that they work by drawing additional elements on top of the corner, so backgrounds are always an issue (there are other issues that crop up too, such as the rounded corners not having smooth anti-aliased edges, etc, but the backgrounds is probably the worst issue of the lot).

But there is a solution – there is an IE hack called CSS3Pie which uses a different technique, and produces genuine rounded corners which do not have this issue.

The other good thing about CSS3Pie is that it tries to make IE use the standard CSS border-radius style, which means you can write your stylesheets using a modern standard that works in all browsers.

Plus, there’s no need for any Javascript/JQuery code in your page (CSS3Pie is itself based on Javascript, but it is abstracted away from your page, so you never need to write a single line of code). And because it’s an IE-specific hack, it never gets loaded by any other browser; all the other browsers will use the CSS standard and get their rounded corners for free; only IE needs to bother with running extra code to make it work.

Finally, CSS3Pie makes IE support several other modern CSS3 styles such as drop-shadows and gradients which would be very tricky to achieve otherwise.