JavaScript rounded corners with transparent background

Question

I'm looking for a JavaScript library that can create round corners on div tags with a transparent background, such that the background colour/image of the parent element is visible at the rounded corners. For an example of rounded corners without a transparent background, have a look at the left menu on this page. Notice that the background of the parent element is not shown at the corners of the menu items.

I need this to work in IE7+ and FF3+ (ideally the other browsers too), and I'd prefer a JQuery plugin.

Does anyone have any good resources or plugins that would help?

Answer 1

JQuery Corner?

Answer 2

It's got a lot of limitations... but the Transparent Background Corners plugin might work in your scenario.

If you can, however, I'd suggest actually doing all the rounding server-side with CSS. It's all just divs within divs, with different padding for the corner divs. It gets rid of the huge performance hit that Safari and IE will take if you have lots of rounding to do, and allows you to have the page still look stylish for your users who don't/can't enable javascript.

Answer 3

I tried 2 different JQuery corner-rounding plugins. This one didn't work in either FF or IE and this one only worked in FF.

However, I found a non-JQuery library that worked perfectly in both, DD_roundies.