jQuery perfect rounded corners

Rounded corners have become one of the essential design components of modern web design. There are numerous ways to implement them in your pages; pure HTML/CSS, proprietary javascript, or using standard frameworks like jQuery. That’s the approach we have chosen, since it’ll be very difficult to overcome the simplicity of this solution.

jQuery is one of the most used javascript framework today. It’s light, easy to setup, easy to use and integrates flawlessly with all the platforms and the browsers on the market. That’s the reason why we have decided to go for that solution to implement rounded corners on our pages.

jQuery can be extended using plug-ins. Plug-ins are, from a programming perspective, little add-ons that can be considered as libraries. The plugin we’ll be using for our rounded corners works exactly like that. It provides a set of methods that allow web developers and designers to seamlessly integrate new features in their projects.

Setting up the scene

jQuery is a javascript framework, and comes as a standard script. So you initialize it like you would do with any other script, by loading it from your page’s <head> section.

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

Then, you load the jQuery plug-ins you’d like to use exactly the same way. In this case:

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

Now, you need to tell jQuery to execute the plug-in. To do so, you will have to use jQuery’s specific syntax. We’re not going to explore all the details about that here, so we encourage you to pay a visit to the jQuery website and browse the extensive documentation you’ll find there.

$(document).ready(function() {     $('whater-css-selector').corners();     });

What have you just done, here? You told jQuery to execute a function once your page has been completely loaded, and that function should apply the corners method to all the elements within the page that match the CSS selector you have specified. For example, you could have written:

    $('.rounded').corners();

Which would have applied the rounded corners method to all the elements that feature a class=”rounded” in your page. Or, you could have written:

    $('div#content>a.link').corners();

Which would have had the same effect on all the a tags with a class=”link” located within the <div> that has a “content” id.

The jQuery Corners plug-in

The plug-in we’re using will easily create beautifully rounded corners. It creates perfectly anti-aliased corners, supports transparency for composite background, and uses no images or unnecessary obtrusive markup. Its key features are :

  • Less than 8000 bytes after yui compression.
  • Beautiful and fast anti-aliasing for older or stubborn browsers.
  • Degrades well for browsers with javascript turned off.
  • Native browser corners used when available (mozilla and webkit).
  • Form and anchor buttons are easily styled and rounded.
  • Vast range of supported browsers (Firefox, Chrome, IE6+, Opera, Safari, iPhone, …)

The method supports various options, that allow you to mix different corners sizes or activate or deactivate anti-aliasing. It rounds buttons and fields corners perfectly. Finally, you can pass the options directly within the class definition right from the HTML code, like this:

<div class="rounded{10px transparent}">

Which will render 10px-radius rounded corners with transparency support for composite backgrounds.

Where do I get it?

» jQuery rounded corners
» jQuery reference


Leave a Reply