keep borders in IE with jquery.corner()

Question

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 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

Answer 1

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