Rounded corners are all the rage - and they have been for quite some time in web design. The way they "soften" up a design make them quite attractive to designers and decision-makers. Unfortunately, implementing rounded corners in a web page is not nearly as easy as it is to implement in a mockup using an image application.

When talking about rounded corners, there are 2 distinct user cases to be considered - the first is when creating rounded corners only on the top corners of an area - this is commonly seen on tabs and block headers. The alternative use case is when all four corners of an area are rounded - this is usually seen in blocks and around content areas. This article will focus on the the case where all four corners need to be rounded. The result will be a method of adding the ability to optionally apply a rounded border to any block on your site in a way that doesn't break when the block is resized.

By the end of the article, you should be able to add this option to just about any Drupal theme - the relevant files you'll need are available for download at the end of this article.

I'll be using the Block Theme module to allow you to turn the border on and off for specific blocks - you might recall that this module was my pick-of-the-week in DrupalEasy Podcast 03.

While I can't guarantee that this method will work flawlessly with your theme, I can confirm that it works without modification in the Zen Classic (an included subtheme of the Zen theme) and Blueprint themes. In addition, I got it to work on the K2 theme with a single CSS tweak.

The method for actually building the rounded border in HTML and CSS was actually blatently borrowed (thanks!) from the Panels module. Another great example of not having to re-invent the wheel.

The first thing you're going to want to do is download and and enable Block Theme.

Next, navigate your way to the Block Theme settings page (admin/settings/blocktheme) and add "rounded|Rounded Border" to the "Custom Block Templates" text area.

Next, you'll need to add some files to your theme. All of these files are available for download at the end of this article. First, put the "blocktheme-rounded.tpl.php" template in your theme directory. If you're using a sub-theme, you'll need to be sure the sub-theme has a block.tpl.php file as well. If not, copy the block.tpl.php file from the base theme into the sub-theme.

The "blocktheme-rounded.tpl.php" file is similar to a default block.tpl.php file with some extra HTML elements.

Then put the "rounded_borders" directory into your theme's "images" directory (if your theme doesn't have an "images" directory, feel free to create one). It is in this directory that the border images reside. I've included a 1-pixel grey border to get you started, although the images are fairly easy to recreate in different colors and thicknesses. You can even add drop shadows to the borders.

In order to link up the images with the new HTML elements, you'll need to place the "rounded_borders.css" file into your theme's "css" directory (again, if one doesn't exist, then feel free to create one).

If you decide to modify the borders, be warned that you may need to tweak some of the CSS in the rounded_borders.css file - particularly if you change the size of the image files or the thickness of the borders. That's a little beyond the scope of this article, but if you do need to tweak the CSS, pay particular attention to the "background-position", "height", and "width" values.

Finally, you'll need to add one line to your site's .info file. This tells your theme to load the "rounded_borders.css" file.

At this point, you absolutely must clear your site's cache (specifically, the theme registry) if you have the Administration Menu and Devel modules installed, then you can do this from the Administration Menu's Drupalicon menu item (all the way on the left).

Superduper - you're all done with the installation. Now all you have to do it go into your block administration page and and click to "configure" a block that you'd like to apply the rounded border to. On the block's configuration page, select "Rounded Border" as the "Custom Theme".

Ta Da! You've done it.

If you're interested in learning how to create tabs with rounded corners, check out this article from A List Apart.