Best jQuery rounded corners script?

Question

Hi,

I've been looking at various scripts for adding automatic rounded corners to a div using jQuery but there are loads of plugins available, none of which seem perfect.

So, does anybody know of a script that is quick to render, supports IE6, anti-aliases and supports opacity?

Any help would really be appreciated, Jon.

Answer 1

These should do the trick.

jQuery curvy corners

original curvy corners

Answer 2

The best I have used is one called "rounded corners"

Website is at: http://www.atblabs.com/jquery.corners.html

jQuery plugin link: http://plugins.jquery.com/project/corners

Answer 3

Here's the one I use.

http://jqueryjs.googlecode.com/svn/trunk/plugins/corner/jquery.corner.js

It can be as simple as saying

$("#divname").corner();

It defnitely scores on working with IE6 and anti-aliasing, but I can't speak for opacity.

Answer 4

Lately I've been using the new CSS3 rounded corners for Firefox, Chrome, Opera & Safari and just leaving IE with normal square corners. It's just not worth the time to do it for IE.

Update:

IE9 will have rounded corners.

Answer 5

jQuery corners has a new beta version @ jQuery corners

Answer 6

jQuery Background Canvas supports IE6, anti-aliases and supports opacity. But it isn't that nifty insert some corners stuff. It gives you full control about the background rendering.

Look at tis sample:

$(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

Answer 7

I've had lots of success with this jQuery plugin: http://malsup.com/jquery/corner/

There are some parameters to fine tune the appearance. I particularly like the effect of rounding just 2 opposite corners with $('#divName').corner("tl br");.

Answer 8

Not jQuery, but if you're interested in creating rounded corners in IE then this may be of use - http://css3pie.com/