Search code examples
drupalcssweb-standardsrounded-cornersdrupal-modules

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

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?

Solution

  • 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.