The Haystack

(2006-04-18: The demo has been updated and expanded upon.)

I need rounded corners for a design I’m working on. A discussion of why I need them is pointless (I know they’re trendy, but in this case they can be considered defining visual elements ;-) ). However, an examination of how to implement them is quite interesting.

The problem

Rounded corners are simple, often (but not always) trivial elements of web design, born perhaps mostly out of the need for variation in content containers on web pages. In certain cases, they can complement an organization’s visual identity. In any case, rounded corners receive far too much attention. Why?

Because they should be simple to implement on web pages, but they’re not. And until CSS3 is supported across browsers (don’t hold your breath, it’ll be a while), designers must resort to hacks and workarounds.

I had specific requirements for my rounded corners:

• They should work in most browsers
• The browsers which don’t support them should display regular boxes
• They should require little or no extra (non-semantic) (X)HTML
• They should require minimal, elegant CSS
• They would ideally use one image for all four corners

Now, granted, this is ridiculous. This is way too much thought going into rounded corners, Doc. But hang in there, every solution starts with requirements.

Many great minds have worked on this problem. The Rounded Corners page at css-discuss shows the fruits of their labors. There are brilliant ideas here, and two of them come close to what I want:

• The minimal HTML-markup in Ryan Thrash’s Simple Rounded Corner CSS Boxes technique (based on Doug Bowman’s Sliding Doors technique) is nice. Ryan has even managed to give the extra markup some meaning. However, I thought the CSS was somewhat lengthy.
• Ischa Gast’s Ronde Hoeken is great because of the use of only one image; the CSS is also very minimal. However, the HTML requires four nested <div></div>elements. Ischa’s technique is based on the work of Roger Johannson and Maurice Svay.

I did consider using JavaScript; scripts such as Nifty Corners and Rico did cross my mind, but for my client, I’m hesitant to have a presentational element dependent upon CSS and JavaScript.

The solution

The result of playing around with the ideas of all these talented people: rounded corners, either fixed or flexible, with very little extra HTML, minimal CSS, and the use of only one image. And it works in every browser I’ve checked (be warned: I haven’t checked every version of every browser and haven’t had time to put together a compatibility chart). My client is happy, and why go through all that trouble without writing it up for my 3 subscribers? ;-)

Here’s the HTML:

<div class="rounded">
   <div class="boxhead">
      <h2>This is a header</h2>
   </div>
   <div class="boxbody">
      <p>This is the body.</p>
   </div>
</div>

Looks familiar, because the markup is straight from Ryan Thrash. Here’s the CSS:

div.boxhead h2 { 
   background: url("rounded.png") top left no-repeat; 
} 

.boxhead { 
   background: url("rounded.png") top right no-repeat;
} 

.boxbody { 
   background: url("rounded.png") bottom right no-repeat;
} 

.rounded { 
   background: url("rounded.png") bottom left no-repeat;
   width: 30%; /* could be whatever you want, 
   as long as your image is large enough */ 
} 

If that’s not simple, I don’t know what is. rounded.png is a large transparent square with (in this case) white corners. How large you make it will depend on if it’s going to be a fixed or a flexible box, and how large the flexible box can grow. The image can also contain a complete border, as in Ischa’s technique.

Styling the boxes is easy. I would keep the decorative styles in separate classes, just to keep things simple. Let’s add some style:

.boxheaders { 
   padding: .4em 0 0 .6em;
   border-bottom: 1px dotted white;
}

.centered { margin: 0 auto; }

.boxtext { padding: 0 1em 1em 1em; }

.green { background-color: #a3bf91; }

and now we add these classes to the HTML, which then looks like this:

<div class="rounded green centered">
    <div class="boxhead">
       <h2 class="boxheaders">This is a header</h2>
    </div>
    <div class="boxbody boxtext">
        <p>This is the body.</p>
    </div>
</div>

This is the result.

This is so easy it’s scary, and I haven’t come across anything cleaner which meets the above requirements. Have fun with it; I sure had fun figuring this out. Thanks and credit to all the people who’ve spent plenty of hours thinking about this stuff, and whose principles and methods have been applied in this method.

You’ll notice I’m switching themes like a maniac. Until I find (or make) the time to make my own design for this blog, I wanted to find a theme which would carry everything along for a while.

But I’m demanding.

I want accessibility, standards-compliance, semantic and uncluttered markup and a great design. I found the last theme, although I liked the look of it just fine, to have some small but annoying usability problems (like people having to look for the “read on” link to continue reading a post from the home page), and I don’t feel like tweaking someone else’s code. So I’m back to the default WordPress template until I get to my own design.

Or maybe not. :-)

I was pleased to receive the Open Standards Dossier on Web-based User Interfaces this morning in the mail. It’s a small book which I wrote with content management guru Erik Hartman of Hartman Communicatie. The booklet, a project of the Dutch Program for Open Source and Open Standards (Programma OSOSS) is meant to introduce laypeople to the most commonly-used standards in front-end web user interfaces, and to give them a model for choosing the necessary standards for their particular situation.

The book is published under a Creative Commons license. I’m not sure how people can get copies of the book; I’ll post it here when I find out.