bioneural.net

Rounded corners. Yes, they may be a "Web 2.0" fashion fad, but it has been clearly documented that they're a lot easier to make than square ones. As part of my overhaul of bioneural.net I've been optimizing much of the code "under the hood", meaning a lot of the changes aren't even visible. Re-evaluating how things are put together, and considering how they could be done more efficiently or otherwise improved is a valuable exercise—that it scratches a perfectionist itch is an added bonus. In this article I look at a variety of methods for creating boxes with rounded corners and gradients. Yep, it's a showdown!

The traditional approach

The well-established method of adding corners or gradients to an element is to use multiple background images. Depending to some extent on your content, this is typically impossible to achieve without the use of non-semantic extra mark-up. For example, this box uses to extra and empty divs:

<div class="curvetop"></div>
<div class="curvemid">
	<h2>Willkommen! Welcome!</h2>
	<p class="german" xml:lang="de" lang="de">Willkommen auf der Projekt Koru Seite, wo Simone &amp; Bruce die praktischen Aspekte eines Jahres in Neuseeland mit Euch teilen wollen. Eine Einf&uuml;hrung findet Ihr <a href="http://www.bioneural.net/2006/03/17/introducing-project-koru/">hier</a> zusammen mit einer <a href="http://www.bioneural.net/2006/03/30/the-teachings-of-te-koru/">Erkl&auml;rung</a> warum wir das Koru als Symbol unserer Reise gew&auml;hlt haben.</p>
	<p class="english">Welcome to Project Koru, where Simone &amp; Bruce share insight into the practicalities of organizing a year in New Zealand. You can find an introduction to the project <a href="http://www.bioneural.net/2006/03/17/introducing-project-koru/">here</a> together with an <a href="http://www.bioneural.net/2006/03/30/the-teachings-of-te-koru/">explanation</a> of why we chose the koru as the symbol for our journey.</p>
</div>
<div class="curvebottom"></div>

Three gradient images (2 having one rounded corner each) could then be loaded into the background of each of the three "layout classes" via CSS:

.curvetop { height: 15px; background: #fff url('gradient-top.png') bottom left no-repeat; display: block; position: relative; margin-top: 10px; }
.curvemid { background: #fff url('gradient-bg.png') repeat-y; padding: 2px 20px !important; display: block; }
.curvebottom { height: 15px; background: #fff url('gradient-bottom.png') top left no-repeat; display: block; position: relative; margin-bottom: 10px; }

The result:

You could use this exact same technique for adding embellishments like borders, drop shadows and the like—but not without some Photoshop skills and a decent collection of bandwidth-hogging images if you needed multiple box styles.

The challenge

I devised a box that I thought would test the mettle of any technique. It consisted of just one div containing a header and a paragraph, the text in each of which should appear over a different background with one of these being a gradient (but not necessarily an image). The box should be formed with rounded corners (including on images), a white border, and a drop shadow. It should also have a number of functional characteristics:

• Minimal mark-up i.e. avoiding nested and/or empty tags;
• No changes to mark-up required (but extra CSS allowed, since this could be moved to an external stlesheet);
• Valid XHTML and CSS (2.1);
• Anti-aliasing on the corners (inner and outer border edges);
• Small footprint (let's say under 20KB);
• If using JavaScript it should degrade gracefully (i.e. still looks OK if JavaScript is disabled);
• Liquid container (adjusting container width to both content size and browser window dimensions).

Why the requirement for minimal markup? Forward planning. Eventually CSS3 will arrive, and there'll be no need to scour your database in order to clean out all that redundant mark-up. Just amend your CSS and delete any unemployed images or JavaScript.

My template XHTML and CSS rendered the following:

Here is the live link.

Finding a solution to fulfil most if not all of my form and function requirements was going to be something of a mission. There's a useful roundup of techniques here, divided into those based on CSS and those based on JavaScript, with examples in both groups requiring anything from no images at all through to eight images. A particular difficulty was finding techniques not restricted by the dimensions of any required image; many of the earlier established methods were clearly devised before the availability of 23" widescreen displays (example.)

I made a shortlist (in no particular order) of techniques that looked promising and set to work. I'm not going to post all the code directly into this article or it will become over-long. The files I used for each technique, together with the master template and original full packages where applicable, are available for download should you wish checkout the code or conduct further experiments. I've tested only in Safari and Firefox.

Download the test files here (.zip archive, 428KB).

Nifty Corners Cube

First up is Nifty Corners Cube by Alessandro Fulciniti. This method uses JavaScript and CSS; no images other than those you wish to use as backgrounds are required. Here is the result:

Here is the live link.

Scoresheet:

Photo background: Supported.

Gradient background: Supported.

Four rounded corners: Yes.

Border: While you can produce a convincing rounded border, using padding on the container, this would require extra mark-up in our example in order to retain the cornering on our background images.

Drop shadow: Not supported.

Minimal mark-up: An extra container is required to render a border with inside and outside rounding.

Static mark-up: Mark-up edited to add extra container plus insert box-specific script.

W3C validity: Yes.

Anti-aliasing: Anti-aliasing is not working on the background images or border, although it does work on solid colour boxes in the examples.

Small footprint: 10KB for CSS and JavaScript (background images additional).

Graceful degradation: Renders as per the master if JavaScript disabled.

Liquidity: Overriding fixed width for .cornered (and in the third case for .xtra) supports liquid layouts (case four).

Score: 8/12

curvyCorners

Cameron Cooke's curvyCorners is another image-free JavaScript solution:

Here is the live link.

Scoresheet:

Photo background: Supported.

Gradient background: Supported.

Four rounded corners: There are rounded corners, but these are rendered adjacent to our background content rather than on top of it. This example illustrates rounding on a background image, but adding a border to the containing div merely fills the cornered area with "extra" offset background (see here).

Border: Obtained by applying background and border to container.

Drop shadow: Not a feature of this technique.

Minimal mark-up: Yes.

Static mark-up: Mark-up edited to insert box-specific script.

W3C validity: Yes.

Anti-aliasing: Yes, but only on the outside of the rounded border (not on images).

Small footprint: 24KB for JavaScript (background images additional).

Graceful degradation: Renders as per the master if JavaScript disabled.

Liquidity: Overriding fixed width for .cornered supports liquid layouts (case four).

Score: 7/12

SRCCB

The "simple rounded corner CSS boxes" technique was devised by Ryan Thrash, also accessible in the form of an online generator as Spiffy Box. It uses no JavaScript and a single image combined with moderately complex CSS (which would have to be recalculated for each box size):

Here is the live link.

Scoresheet:

Photo background: Supported (integrated into container background).

Gradient background: Supported (integrated into container background).

Four rounded corners: Yes (integrated into container background).

Border: Yes (integrated into container background).

Drop shadow: Yes (integrated into container background).

Minimal mark-up: Requires two additional divs for positioning purposes.

Static mark-up: Mark-up edited to insert two additional divs.

W3C validity: Yes.

Anti-aliasing: Yes (integrated into container background).

Small footprint: 6KB image overhead compared to master with original 2 background images.

Graceful degradation: Not applicable as no JavaScript.

Liquidity: Depends upon fixed-width images.

Score: 9/12

swfIR

The SWF Image Replacement (swfIR) technique is offered by Jon Aldinger, Mark Huot, and Dan Mall. It applies to inline (cf background) images and uses JavaScript and Flash to swap out the original and deck it out with bling. It does more than we require—image rotation and stretching for example, and at first glance it certainly looked like the wrong tool for the job. I wondered, however, if we could use CSS positioning to overlay our text on top of the replaced images. It turns out you can:

Here is the live link.

Scoresheet:

Photo background: Supported (as an inline image!).

Gradient background: Supported (as an inline image!).

Four rounded corners: Actually you get 6! (you could potentially blot out the bottom border on the heading using a third positioned inline image—a real hack!).

Border: Yes (specified in JavaScript).

Drop shadow: Yes (specified in JavaScript).

Minimal mark-up: Requires insertion of two inline images.

Static mark-up: Mark-up edited to insert inline images plus box-specific script.

W3C validity: Yes. It does validate, but should I say "No" because it depends on Flash?

Anti-aliasing: Yes.

Small footprint: 25KB (24KB JavaScript and SWF; 1KB image overhead compared to master with original 2 background images.)

Graceful degradation: Acceptable (just) with JavaScript disabled.

Liquidity: Positioning depends upon fixed-width images.

Score: 7/12

ShadedBorder

Steffen Ruzee brings you ShadedBorder, a full-featured solution that uses only JavaScript:

Here is the live link.

Scoresheet:

Photo background: Supported.

Gradient background: Supported.

Four rounded corners: Yes.

Border: Yes (specified in JavaScript), but height on .sb-inner causes blue background to show through (why isn't this also an issue with the h4 background image?). Setting height to 0 removes the bar but also takes out the gradient! Admittedly, you could style the background to tone in better.

Drop shadow: Yes (specified in JavaScript).

Minimal mark-up: A headline with it's own style can be achieved with extra mark-up, and extra script in the head, and another script that must be inserted before the closing body tag. This makes it fatally flawed for use in a templated system like WordPress, IMHO.

Static mark-up: As above, mark-up edited at 3 points, including a necessary change from div class to ID.

W3C validity: Yes.

Anti-aliasing: Yes.

Small footprint: 9KB JavaScript.

Graceful degradation: Renders as per the master if JavaScript disabled.

Liquidity: Yes (comment out width on #cornered; not shown due to duplicate IDs).

Score: 9/12

SVG

Firefox 2 and Safari 3 can both display standalone Scalable Vector Graphics (SVG) images, an unloved W3C standard. They can't load SVG from CSS, however, making SVGs unusable as background images at this time. The option to use SVG in CSS hasn't gone beyond a proposal, with Wikipedia noting "the use of SVG on the web is in its infancy". It took me quite a few hours to get to grips with the examples in the 1.1 spec and create a valid and functional XHTML/SVG file for testing purposes. The basic idea is to create a bordered box with rounded corners, fill it with a gradient, and apply a Gaussian blur to a slightly offset box of the same dimensions—all with a few lines of XML. Here is our box using Opera 9.25 (Mac):

Here is the live link (SVG-aware browser required).

Scoresheet:

Photo background: Supported in CSS, but you loose the rounded corners.

Gradient background: Supported without CSS via linearGradient.

Four rounded corners: Yes via rx on rect.

Border: Yes via stroke on rect.

Drop shadow: Yes via filter with feGaussianBlur, feOffset, and feMerge.

Minimal mark-up: Requires insertion of inline SVG image(s).

Static mark-up: SVG must (currently) be added inline; also necessitates DOCTYPE change and .xhtml file extension.

W3C validity: Yes.

Anti-aliasing: Yes.

Small footprint: 0KB (background image additional; gradient image not required).

Graceful degradation: No (Internet Explorer 6 and 7 choke).

Liquidity: Positioning depends upon fixed-width SVG images; resizing text size or browser window is problematic.

Score: 7/12

Update 18.03.08: Safari 3.1 adds support for SVG images in img elements and CSS images.

CSS3

CSS3, if it ever arrives, promises not only rounded corners but drop shadows and multiple background images too (oddly the draft spec doesn't mention gradients). Apple's Safari (available for Mac and PC) already includes support for such effects—but of course it's not valid CSS. You can preview CSS3 rounded corners here and here in Firefox or Safari 3. Here is our box using Safari-specific not-quite-CSS3:

Here is the live link (WebKit browser required).

Scoresheet:

Photo background: Supported.

Gradient background: Supported.

Four rounded corners: Yes.

Border: Yes.

Drop shadow: Yes.

Minimal mark-up: Yes.

Static mark-up: Yes.

W3C validity: No, but only because the standard isn't yet established.

Anti-aliasing: Yes, but note anti-aliasing artefact in the bottom corners.

Small footprint: 0KB (background images additional).

Graceful degradation: Yes (non-CSS3 aware browsers see a plain box).

Liquidity: Yes.

Score: 11/12

Summing up

Which technique you choose ultimately depends upon what you're after and what you prioritise. There is no one "best" solution that fits all requirements. In terms of form and function CSS3 has to be the clear winner if one must be chosen, with a perfect score blown only by the fact that it isn't a W3C standard (yet). Herein lies CSS3's only significant yet overwhelming drawback: what good is it if the majority users can't see the effects? At the same time I'm not personally sold on any of the alternative methods. The end results may look good; it's how they achieve them that I don't much care for. Although a method validates it typically involves cheating the validator (seemingly JavaScript's raison d'être). Just take a look at the live links with Safari's Web Inspector (example).

Before I put a lid on this little adventure, as Jobs would say, there's just one more thing... what about jQuery? The jQuery library (included with WordPress and the K2 theme) can be extended to render corners, shadows, and gradients. If this article was Part 1, then that exposition forms Part 2. Coming soon.