keep borders in IE with jquery.corner()

I'm using the jQuery plugin "corner": http://www.malsup.com/jquery/corner/ Its almost doing a great job making my divs round at the edges.

The problem is, my divs have borders of 1px applied. This works great in Safari, FF, Chrome etc. Only in IE (8) the borders will disappear. It does render the edges round, but no borders.

On the site mentioned above I开发者_JAVA百科 found that $(this).corner('keep'); will keep the borders. I tried that, but then IE will output square corners (not rounded) and correctly show the borders.

---

Any help? thx, Mexx

---

According to the documentation on their site, you can nest two div so it looks like there is a border (it will work on IE).

$(this).corner("round 8px").parent().css('padding', '1px').corner("round 10px")

I personnally think it's ugly since you have to add useless markup, but I'm affraid it's the only solution if you want to stick to this plugin.

I know there are other solutions out there if you want to use CSS3's border-radius in IE. You should read what Microsoft is saying about it (and click on the links provided): http://msdn.microsoft.com/en-us/library/bb250413%28VS.85%29.aspx

---

I know this is old but it happens to be the first stackoverflow result in google for this question

easy solution without re-jigging all your corner divs by hand

use jQuery

$('.yourcornerclass').wrap('<div class="youroutercornerclass"></div>');

much more information here @ tonyamoyal with full code examples

---

Try it with:

$(this).corner("round 38px").parent().css('padding', '1px').corner("round 40px")

there is a problem too.