Create Roundable Corner with jQuery

This jQuery plug-in will create beautifully rounded corners. No need to use images or obtrusive markup.  Support for padding ensures your layout degrades gracefully for users who have disabled JavaScript.

Features:

1. Easily change the width and height of the adornment area with effect.
2. Easy to Customize You can apply different effects to top and bottom corners, or apply an effect to specific corners.
3. Boxes to be adorned are selected using the standard JQuery $() element selector function.
4. No special markup is required; display falls back to unadorned corners when JavaScript is off.
5. you can create your own custom corner effects with Myriad JQuery Corner will use.

Tips and Tricks

As you apply these corner styles to your own pages, here are some tips (pitfalls?) to keep in mind:

• Use pixel units for borders and padding in your styles. The code needs to position elements at the top and bottom of the adorned element, and to do this it wants to see pixel measurements. Measurements other than padding and borders can be in any units you want.
• Remember, it's inserting new elements. If you have css rules or jQuery selectors that depend on, for example, finding the first element in a div that you are rounding, they could be affected by the newly inserted elements. Use a DOM inspector if you think this is happening and adjust your selectors accordingly.
• Define an explicit background color in a parent element. Safari requires that an ancestor of the element being adorned has a background color set. Just set the body to "background: #fff" if you don't need some other color.
• Don't use a background image in the parent. The adorned element effect sets pixels on the corners to the same color as the parent element. Those pixels are not transparent and will not show any background image that is used in the parent element.
• Make the corner height smaller than the top/bottom padding. If the height of the corner effect is larger than the padding, the div's height will increase. You can either accept that or adjust the height/padding appropriately.
• Minimize height and number of adorned divs for best performance.Each pixel of additional height requires an element to be dynamically created and inserted into the document, plus two more to wrap the top and bottom groups. So, an effect that is 8 pixels high on both the top and the bottom inserts 18 elements into the document for each element on the page that is adorned.
• The "sharp" corner style is very sharp! Come to think of it, so are the "sculpt" and "cool" styles. Like all sharp pointy things, keep them out of reach of children. If you use are viewing a web page on a mobile device that uses those styles, do not run. You may fall and put your eye out. I will not be responsible for injuries due to the sharpness of your corners.

{via...www.malsup.com }