Create rounded corners for DIV elements using Javascript

Posted by Sharninder on March 3, 2009

curvyCorners Most websites these days use rounded corners for almost all website elements. Creating rounded corners isn’t easy since it requires creating perfectly aligned images and well, you need to be a photoshop or a GIMP ninja, which I’m definitely not.

So, I went looking for a better solution and found a Javascript which would do the same for me.

curvyCorners (Their capitalization, not mine) is a free JavaScript program that will create on-the-fly rounded corners for any HTML DIV element, that look as good as any graphically created corners.

No image editing, no GIMP, no photoshop Ninja required !

To start using curvyCorners, you need to import the JavaScript in the <head> section of your webpage.

<script src=”curvycorners.js” type=”text/JavaScript”></script>

Then create your DIV tag normally as you would

<DIV id=”NinjaID”></DIV>

Next comes the part where you actually add the Javascript code to handle the rounding of the corners. This should also go in the head section of the webpage.

<script type=”text/JavaScript”>

window.onload = function()
{
settings = {
tl: { radius: 20 },
tr: { radius: 20 },
bl: { radius: 20 },
br: { radius: 20 },
antiAlias: true,
autoPad: false
}

var divObj = document.getElementById(“NinjaDiv”);

var cornersObj = new curvyCorners(settings, divObj);
cornersObj.applyCornersToAll();
}

</script>

That’s all there is to it. The above code will create a nicely rounded DIV with a 20 pixel radius. Change the number after the “radius: ” keyword to change the radius of the circle used to create the corner.

curvyCorners Example

The tl, tr, bl and br keywords stand for the top left, top right, bottom left and bottom right corners. So, you can even have different radiuses for different corners, if you want to.

This example has been taken from the Usage page and they also have lot of other cool tricks that you might be interested in.

curvyCorners works on IE, firefox, Opera and Safari and is supported on both Windows and Mac OS X.

Download curvyCorners

Sharninder: