Rounded corners on Divs. Problem with Internet Explorer only!

Question

Has anybody experienced any problems with creating rounded corners on Divs? I am using the jQuery plugin from http://jquery.malsup.com/corner/

The problem is that the top corners are not rounding in Internet Explorer. Works fine with Firefox! Anybody got any advice?

Here's my code:

<script type="text/javascript">

        $(document).ready(function() {
            $("#panel").corner("10px");
        });

</script>

Here's the div that gets rounded:

<div ID="panel">test</div>

Answer 1

IE does not support HTML5 or CSS3, so looking at this test page which you supplied it is clear that it will not work in IE because the examples on this page modify CSS properties which IE is not designed to handle.

EDIT: After looking at the example again (in IE this time, as I should have the first time) thanks to the comment, I have no idea why your thing is broken in IE.

Answer 2

I had a lot of problems getting any IE rounded corners code to work on a background that wasn't solid.

In the end I had to go with a .gif solution.

This will be supported in IE9.

Answer 3

I had similar issues with using that plugin. I ended up using class selectors to do it:

$('.header_box').corner("top round 10px")