Tuesday, January 08, 2008

Adding rounded corners to your web pages

There are several ways of adding rounded corners to your web page. There is a large list of methods found at Rounded Corners - css-discuss, but also a few other ways using JavaScript (some using jQuery):

  • The first (as far as I am aware) jQuery corner plugin (Dave Methvin)
  • An improved version (Mike Alsup) of the above plugin
  • curvyCorners - anti-aliased corners, supporting borders and background images
  • A modified version of curvyCorners made to work with jQuery.
  • The above plugin was rather big and couldn't be packed, so someone else made a futher modification that reduced its size and enabled it to be packed.
  • Cornerz - smooth, anti-aliased corners. Another jQuery plugin. Anti-aliased, but does not support backgrounds.
  • Rounded corners using <canvas>. <canvas> is a way of drawing/manipulating images via scripting (e.g. draw vector images, transformation, compositing, animations etc). There is a tutorial available on how to use it. Firefox 1.5+, Opera 9+, Safari only - excanvas adds support to Internet Explorer.

Implementations are not always heavily tested within different layouts and CSS, so while a preferred one may not work as expected, there should still be a way to add the effect (even if it involves more code).

A very light-weight way to do this would be via CSS 3 (as it supports multiple background images), but sadly only Safari supports this: demo. Could be some way off as the CSS 3 specification isn't finalized (but neither is CSS 2.1), although it is a useful feature that will likely not change (or be removed) and be adopted by newer versions of currently developed browsers (Firefox 3 and IE8 should hopefully have this).

1 comment:

Jonah said...

Cornerz also uses VML / Canvas. But doesn't reply on excanvas- making it very fast.