Even More Rounded Corners With CSS

2009 Update

How about glossy, rounded corner Mac OS X-style buttons with 100% CSS, two HTML elements and zero images? CSS 3 is coming, and you should start using it now if you aren't already. Take a look at CSS 3 and The Future: Image-free Rounded Corners, Drop Shadows and Gradients.

Another Technique for The Pile.

Even More Rounded Corners With CSS: screenshot

Yep, it's another article detailing a method of doing rounded corners with CSS. In this case, single-image, PNG-based, fluid rounded corner dialogs with support for borders, alpha transparency throughout, gradients, patterns and whatever else you (or your designer) could want. The potential downsides are image file size, IE 6 degradation and vertical scrolling, but there are a number of technical benefits over the original version, and at the end of it all, I'd say these look really nice (which ultimately in the "web 2.0-era web," is a big thing these days.)

Less is More.

After considering desired features and trading convenience for code size, performance and flexibility, I ended up with this:

  • CSS-only, no Javascript
  • Fluid layout, width/height (up to full image dimensions)
  • Single PNG image
  • PNG alpha transparency - corners, borders, drop shadows, inner gradients etc.
  • Standard Module Format-based content markup (SMF approach thanks to Nate Koechley) - see also, "It's Not Divitis" (2)
  • Degradation to GIF (or 8-bit PNG) for IE 6

Does "Less is More" = Less Performance?

"More or less?" Well, not necessarily.

While file size is likely to be larger due to the single image approach, browsers will only have to make a single HTTP request; this is far superior to the six requests made for the previous version of this approach. The markup has also been modified to be slightly lighter, and though it now has slightly different restrictions, it offers other new benefits. Once a template is set up, swapping out content and background images ("sprites") should be quite easy.

On the other hand, having huge alpha-transparent images flying around in the browser may not give a lightning-fast experience due to the CPU required to draw and redraw the transparency. It's interesting to note that the "native" OS browsers - IE on Windows, Safari on OS X, and out of nowhere, Opera 9, do a pretty good job of this. (It would appear they're able to take advantage of hardware acceleration.) Firefox chokes by comparison, as it presumably does not.

Nonetheless, this technique may not be suitable for you if you want to have endless-scrolling content, heavy nesting and so on. There may be some bugs or inconsistencies given the heavy alpha transparency experimentation. More notes, examples and downloads are available on the project page.

Demo

Less talk, more show; go check it out.

Related links