Rounded Corners in Drupal - the easy way

Doing rounded corners is pie in Drupal. There's really 3 "real" options.

1. Do it with a module (http://drupal.org/project/rounded_corners)
2. Do it with hardcore CSS + images
3. Do it with jQuery

I don't know about you but options 1 and 2 take too much work (for me anyway). So, I went option 3 and let jQuery do all the work.

You start off by downloading the jQuery corner plugin. This is a sweet little plugin written by Dave Methvin and Mike Alsup. After downloading the corner plugin, copy it to into the /js folder of your target theme. Create the folder if it doesn't exist.

Refer to the screenshot to the right. If you are wondering, I am using Netbeans 7 and that is a partial screenshot of my workspace.

After that create a second js file. I named by icc960scripts.js. This is where I wrote the javascript to use the jquery corner plugin. Here is the content in mine:

$(document).ready( function(){

    // the top part of the block
    $('#sidebar-last .block h2, #header-regions .block h2, #main-content .odd h2').corner("top");

    // the bottom part of the block
    $('#sidebar-last .block .content, #header-regions .block .content, #main-content .node-content ').corner("bottom");

});

Top part of the block is an H2 element which is rounded only on the top part. And then bottom part is a
DIV element with a border. You might have to override (or modify) the node.tpl.php template if you are using a template with a different markup.

Screenshot from firebug of the HTML structure

Rounded Block

What left is just to add some CSS to make it look good. Here's how mine turned out. The header background color is #CBB859 and the border value of the div is 1px solid #ccc.

BTW, don't forget to declare the scripts in the .info file of your Drupal theme.

; ------- Declare default javascript includes
scripts[] = js/jquery.corner.js
scripts[] = js/icc960scripts.js

It should be easy to figure out that the same technique can be applied to other elements in the Drupal theme output. Experiment and see what works and what doesn't!