Fluid rounded corners with jQuery

Question

What is the best way to create fluid width/height rounded corners with jQuery?

---

That plugin doesn't keep the height the same. I have a 10px high div that I want to round the corners on, when I use that script it adds about 10px onto whats there.

Answer 1

$(this).corner();

See: malsup.com/jquery/corner and github repository for future ref

Answer 2

I use: Jquery-roundcorners-canvas

it handles borders, and keeps things the same size, in fact you have to pad in a bit to keep from having letters live in the crease. Its pretty fast, unless you are on ie 6. Same pretty syntax of the other corner packs, but just prettier in general.

Edited to add new link for jQuery Roundcorners Canvas

Answer 3

The way the jQuery UI Theming API accomplishes this in Firefox is with "Corner Radius Helpers".

Here's what they look like in the CSS that was bundled in my copy of the UI:

/* Corner radius */
.ui-corner-tl { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; }
.ui-corner-tr { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; }
.ui-corner-bl { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; }
.ui-corner-br { -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; }
.ui-corner-top { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; }
.ui-corner-bottom { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; }
.ui-corner-right {  -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; }
.ui-corner-left { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; }
.ui-corner-all { -moz-border-radius: 4px; -webkit-border-radius: 4px; }

Unfortunately, these don't appear to have any effect in IE7 as of this post.

In jQuery code, one of these classes might be applied in a fashion something like this:

$('#SomeElementID').addClass("ui-corner-all");