Rounding A Corner
Published 20 years, 8 months pastAdam Kalsey shares a method for rounding corners that has minimal HTML impact. I explored the same basic concept (along with several others) in Project 10 of Eric Meyer on CSS, although in my case I used it to provide rounded corners between two differently-sized sections of a document; sort of the visual inverse of what Adam demonstrates, but using the same fundamental techniques.
It’s always interesting to see ideas emerge in different places, mutate, evolve, advance, and generally act like they have a life of their own. Did somebody say “meme?”
The thing is, of course, that we’d be better off not having to hack in bits of HTML just to get these effects. CSS3 offers proposals for corner-rounding properties, and that’s a good step forward. One can also use XBL to dynamically insert the needed bits and style them, without having to clutter up the source document. Here’s my XBL-based recreation of Adam’s demonstration. Now here’s a variant employing more complex corner and border effects. And then there’s blockquote styling with great big background quotation marks and rounding of some corners.
The above examples will only work fully in Gecko-based browsers (as of today, anyway), but what’s interesting to note is that they don’t look bad in non-Gecko browsers. Take the blockquote example, for one. In a Gecko browser, you get all the eye candy. In a non-Gecko browser you get a visually distinct blockquote with less eye candy. It still looks pretty good, or at least not bad; it could probably use some padding, but these aren’t polished examples. The document structure is clean, and semantically appropriate. What’s not to like? This seems like another aspect of the concept of graceful flexibility—or, if you prefer, progressive enhancement—and one worth further investigation.