Rounded Corners using jQuery

Posted: April 24th, 2009 | Filed under: jQuery | Tags: jQuery | 8 Comments »

jQuery is slowly changing the way web designers and developers create web sites. Here is an extremely easy way to achieve rounded corners using jQuery.

You can view live demos on iSearchNotes.com or at the plug-in webpage.

In order to create our rounded corners you will of course first need jQuery. If you do not already have jQuery hurry up and go download it at jquery.com. I will wait.

Waiting…

Ok so now you will also need to download the rounded corners plug-in. This small jQuery script can be downloaded by saving this file jquery.corner.js

Now we have all that will will need to round those corners. On the page you wish to have the rounded corners on you must add includes to both javascript files.

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.corner.js"></script>

Now we must tell jQuery which areas of the layout to round.

<script type="text/javascript">
$(function(){
$("#content").corner()
});
</script>

<div id="content">Hello this would have rounded corners</div>

This simply uses jQuery’s selectors to select the id content and rounds all 4 of that divs corners by the default amount.

This plug-in can do so much more then this example. You can pick which corners to round, how much to round by, how to round, and much, much, more. Instead of listing them all check out the plug-in page to see more uses of it. (there are some pretty cool ones near the bottom of the page)

There are many different ways to use it but some of the more common uses would be:

	$("#content").corner()
	$("#content").corner("bottom");
	$("#content").corner("top");

You could always avoid javascript altogether and do it the hard way using css.

If you enjoyed this post, make sure you subscribe to my RSS feed!

---