curvyCorners | JavaScriptSource


Cameron Cooke Mar 13, 2006


JavaScript-generated rounded corners for any DIV element. Corners are anti-aliased, and support borders of any width and color. Displays nicely with square corners, if JavaScript is turned-off. No images or CSS required.

You can place text here.


Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: curvyCorners.js


Paste this code into the HEAD section of your HTML document.


Paste this code into the BODY section of your HTML document

Leave a Response


Good script but I (personally) don't like how when the html page is rendered it shows the rectangle borders for a few microseconds, then curves them.[br /][br /]Do this to stop the square corners from showing:[br /][br /]Replace </BODY> with:[br /][br /]<script language="Javascript">[br /]cornerInt();[br /]</script>[br /]</BODY>[br /][br /]and comment out &#91;using //&#93; the line of code in the js file:[br /]xAttachEventOnLoad("load", cornerInt);[br /][br /]I found this then loads the page and curves the corners without showing the square corners for a few microseconds - much improved and much more professional looking.

Dave Holland Nov 19, 2008

Hi This code was really helpful. Thank you very much.[br /][br /]Chhers

Vivek Bhat Sep 23, 2007