What is the best way to create standards-based, cross-browser compatible rounded corners in Drupal?

Question

I am currently working on a Drupal 6 theme, for which designer is explicitly requesting to use A LOT of rounded corners.

I could of course create the rounded corners - traditionally - with images. But I know there must be also better and easier ways of creating rounded corners.

Optimally, I would like to write my CSS as standards-compliant CSS3, with selectors like:

h2 {border-radius: 8px;}

Use of browser-specific is CSS is very OK also, like

h2 {-moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;}

If required, I can also insert some custom JavaScript by hand. I just want to avoid adding yet another 100 rounded corner images to my markup.

Any suggestions on the best approach?

Answer 1

Define a class like "roundy-corner" and use the jQuery corner plugin like so:

$('.roundy-corner').corner();

You will need the jQuery roundy corner plugin:

http://www.malsup.com/jquery/corner/

I like to use JavaScript here because it doesn't require any additional markup in the source document; the script will insert placeholder elements as needed. Also, in the far, far future when we all have flying cars and IE supports border-radius, you can replace it with pure CSS.

Answer 2

Some Drupal-specific notes to use the suggested rounded corners plugin:

1. Download jquery.corner.js and put it to your Drupal installation's scripts folder. Make sure to set the file permissions correctly.
2. Load the script in your (Zen) theme by adding the following line to template.php: drupal_add_js('scripts/jquery.corner.js');
3. Assign rounded corners to any part of the page by adding styling commands again to template.php. Note that you need to hook them with drupal_add_js method. For instance:

drupal_add_js(
  "$(document).ready(function() {
       $('#primary a').corner('top round 4px');
       $('.block-inner h2.title').corner('top round 4px');
   });",
  'inline'
);

That's it!!! Beautiful rounded corners with no images!