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.