MissingMethod

Ah, rounded corners, how I loathe thee…

It goes without saying (so I’m saying it) that you can’t really do a Web2.0 site these days without having some rounded corners. And I’m fine with that, I think they’re a popular and appealing design tactic for a reason: they work. They give some visual interest and dimension while softening the look of your site.

But are they ever a pain in the ass to implement. Let me count the ways:

- CSS rounded corners are lightweight, but require extraneous markup.

- Image-based corners are prettiest, but aren’t very flexible and also add non-semantic markup.

- Javascript corners are slow. Period. They look good and they’re flexible and they don’t add markup, but they’re eye-glazingly slow.

There are other reasons why implementing rounded corners sucks, but chief among them is the sheer number of different implementation strategies you have to think about every time you go through the exercise.

But you do it anyway, ’cause they’re pretty, and pretty always beats practical. So here are a few resources to get you started.

A good overview of the whole rotten mess of a problem over at Scott Schiller’s site.
Javascript, javascript, and more javascript:

• First there was NiftyCorners, and NiftyCorners begat NiftyCube, and NiftyCorners saw that it was good.
• curvyCorners looks nice, you can do transparent corners, custom backgrounds, it even respects your CSS padding on elements. Did I mention Javascript is freaking slow for rounding corners?
• Rico’s rounded corners implementation, without the rest of Rico, thanks to Justin Palmer of Encytemedia.
• RUZEE.borders, despite sounding like something you’d buy at a clown shop, is actually a pretty robust implementation, featuring anti-aliased drop shadows, configurable border widths, and nice degradation (your page still works with Javascript off). I haven’t tried this one yet, but with all those great features, one can only imagine that for large pages with lots of rounded elements, it’s going to be, um, slow?

Images are great because you have to change them every time you want to change your layout. Did I say great? I meant crappy.

• This one’s a classic: Adam Kalsey’s Rounded Corners in CSS is more than three years old and it’s still the first Google hit.
• Rounded corners using a single image! Hey, that’s three less images to mess around with! Unfortunately if you have lots of different rounded boxes or need a custom background, this will be less-than-ideal.
• Sliding Doors wasn’t just a crappy Gwyneth Paltrow movie, it was also one of the first (and most popular) methods used to style an unordered list into a series of rounded tabs. Works for DIVs too.

In the end, we’d all like a pure CSS solution. Something like div.rounded {border:1px rounded #000} would be nice (hey, what’s this CSS 3 link doing in my blog post?!). But for now, all the CSS-only solutions out there involve lots of extra markup and pretty inflexible results.

• SpiffyCorners at least does you the favor of generating the CSS and HTML automatically. But all those meaningless tags kind of make me gag.
• SpankyCorners has a funny name, but it’s not really pure CSS (though they do generate the images for you), and I needed to have at least two items to justify making this section a list.

What’s the point?

Generally speaking, I say go for one of the solutions that use CSS and images, at least until something better comes along. The javascript ones are tempting (I’ve used them myself) and they can work if you have a relatively small number of elements you need to round, but they WILL get slow after a certain point. Images are less flexible, this is true, but if your site design allows for it, it’s the safest and fastest way.

Now, if you have requirements that force you to do lots of custom backgrounds or transparent corners (where the corner must show the background on either side), then you’ll have to seriously consider the Javascript options, because they give you a far greater degree of flexibility. Pure CSS just doesn’t make sense to me if it means adding so much gawd-awful markup that you can barely see what you’re coding.

Are there other rounded corners implementations I missed? If there’s something better out there I don’t know about, I’d love to hear about it (preferably before I implement a less-than-perfect rounded corners strategy on my next site).

Last Modified : October 9th, 2006
Filed under : Javascript, Design
Navigate : Previous post / Next post