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?

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?

• javascript
• html
• css
• jquery-plugins

Share Improve this question Follow edited Mar 25, 2009 at 14:01 George Stocker 57.9k2929 gold badges181181 silver badges238238 bronze badges asked Mar 25, 2009 at 13:24 DónalDónal 188k177177 gold badges586586 silver badges844844 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

JQuery Corner?

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.

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.