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

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 2

$(this).corner();

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

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");

Answer 4

If you want full control about the border an d gradient, you can use my iQuery Background Canvas plugin. It works with a HTML5 Canvas element and allows to draw borders and backgrounds in any variation. But you should be able to program JavaScript

This is a full featured sample with a background gradient and rounded corners. as you can see, the drawing is completely done in JavaScript, you can set every parameter you want. The drawing is redone on every resize (Due to the resize Event), you can adapt the background drawing to show wat you want on this specific size.

$(document).ready(function(){
    $(".Test").backgroundCanvas();
});

function DrawBackground() {
    $(".Test").backgroundCanvasPaint(TestBackgroundPaintFkt);
}
// Draw the background on load and resize
$(window).load(function () { DrawBackground(); });
$(window).resize(function() { DrawBackground(); });

function TestBackgroundPaintFkt(context, width, height, elementInfo){
    var options = {x:0, height: height, width: width, radius:14, border: 0 };
    // Draw the red border rectangle
    context.fillStyle = "#FF0000";
    $.canvasPaint.roundedRect(context,options);
    // Draw the gradient filled inner rectangle
    var backgroundGradient = context.createLinearGradient(0, 0, 0, height - 10);
    backgroundGradient.addColorStop(0 ,'#AAAAFF');
    backgroundGradient.addColorStop(1, '#AAFFAA');
    options.border = 5;
    context.fillStyle = backgroundGradient;
    $.canvasPaint.roundedRect(context,options);
}

Here is the plugin, and this site makes a vast use of it: jQuery Background Canvas Plugin