Rounded Corners With jQuery

Rounded corners have become very popular and could be very easy to implement using CSS3. However as we know, some widely used browsers won’t give support to CSS3, making our life more complicated and our code more ugly.

Luckily, there are ways to get around for browser limitations! There are numerous CSS-only techniques that vary in complexity and flexibility. In addition to the numerous javascript techniques that are usually easier to implement. This is my favorite one:

The “jQuery Corner Plugin” (jquery.malsup.com/corner/) will add divs to the element with a solid color background to hide the original corners and create the illusion of rounded corners. What I really like about the “jQuery Corner Plugin” is that it detects if your browser gives support to CSS3 and will use the appropriate CSS if possible.

Here’s how to implement it:

1. If you are not using Drupal, add the jQuery library to your site.
2. Add the plugin file to your site header.
3. Create a separate javascript file that will call the plugin on the elements you want. It will look something like this:

$(document).ready(function() { $('#pagebody').corner("top 10px"); /* adds a 10px radius corner to the top of the page container */ $('h2').corner("5px"); /* adds a 5px radius corner to every h2 element */ });

Now, here is an interesting question! What if you wanted to use the rounded corners on every form submitted BUT not in a specific case, like on your search "form submit?"

Well, then you’ll have to use the “not” operator. Here’s an example:

$('.form-submit').not($('#search-form .form-submit’)).corner("5px");

Every element with the “form-submit” class that is NOT inside a div with a “search-form” id will get rounded corners.

Very simple isn’t it?

Whats your favorite technique to create rounded corners? Share with us!

Have a happy theming!