Musings of a startup founder

Musings of a startup founder


Chris Duell, co-founder @ elev.io

Chris Duell
Author

CEO & Co-founder of elev.io

Share


elevio

Twitter


Adding Rounded Corners Easily with Javascript

There are a few other libraries out there that allow for the creation of rounded corners, where CurvyCorners differs though is that it only attempts to make the…

Chris DuellChris Duell

There are a few other libraries out there that allow for the creation of rounded corners, where CurvyCorners differs though is that it only attempts to make the corners with Javascript if the browser being used doesn’t support CSS3 (for those unaware, rounded corners is supported in CSS3, however CSS3 is not available in browsers that hold the highest market share just yet).

So if the user is browsing your site on say Internet Explorer 8, the normal CSS3 rounded corners will be used. If however the user is browsing your site using Internet Explorer 7, the Javascript will kick in and create the rounded corners.

Using CurvyCorners couldn’t be simpler, first you’ll need to obtain a copy which you can get either as a full download here, alternatively you can get the latest version from subversion from http://curvycorners.googlecode.com/svn/tags/2.0.x/stable (or if you live on the edge, the latest development code is at svn co http://curvycorners.googlecode.com/svn/trunk).

Once you’ve downloaded the code and placed it with your other source files for your site, and loaded it in your site as you would any other Javascript file, you’ll just need to edit your CSS file to determine which of your elements you would like to give the rounded corners to.

Let’s say you wanted to wrap your entire site in a rounded box, and your existing wrapping container was a div with the class “wrapper”. Simply edit your CSS declaration for the .wrapper class similar to the following

.wrapper { -moz-border-radius:3ex; -webkit-border-radius:3ex;

As you can probably guess, the webkit section is for CurvyCorners to pickup if the CSS3 “-moz-border-radius” isn’t supported by the browser.

There are a myriad of settings available for the script, along with the ability to call the script dynamically in cases where the box would be displayed as the result of an Ajax call.

For full instructions, check out CurvyCorners.net****

Chris Duell
Author

Chris Duell

CEO & Co-founder of elev.io

Comments