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?
Share Improve this question edited Mar 25, 2009 at 14:01 George Stocker 57.9k29 gold badges181 silver badges238 bronze badges asked Mar 25, 2009 at 13:24 DónalDónal 188k177 gold badges586 silver badges844 bronze badges3 Answers
Reset to default 3JQuery 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.