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

Question

I am currently working on a Drupal 6 theme for which the designer is clearly asking for the use of LOT rounded corners.

I could, of course, create rounded corners - traditionally - with images. But I know that there should also be better and simpler ways to create rounded corners.

Optimally, I would like to write my CSS as standardized CSS3, with selectors like:

h2 {border-radius: 8px;} 

Using browser-specific CSS is also very good, for example

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

If necessary, I can also insert some custom JavaScript manually. I just want to not add another 100 rounded corner images to my markup.

Any suggestions on the best approach?

Answer 1

Define a class, such as "roundy-corner", and use the jQuery plugin for this type:

 $('.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 does not require additional markup in the original document; The script will insert placeholders as needed. Also, in the distant future, when we all have flying machines, and IE supports border radius, you can replace it with pure CSS.

Answer 2

Some Drupal related notes for using the suggested rounded corner:

• Download jquery.corner.js and place it in the Drupal installation scripts folder. Be sure to set file permissions.
• Download the script to the (Zen) theme by adding the following line to template.php: drupal_add_js('scripts/jquery.corner.js');
• Assign rounded corners to any part of the page by adding styling commands to template.php again. Note that you need to connect them using the drupal_add_js method. For example:

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

What is it!!! Beautiful rounded corners without images!