How To Get Smoother Rounded Corners

Border-radius — don’t ya just love it? It’s easily over-used, but done nicely and not too often, rounded corners can add a touch of class to pretty-much anything.

However certain color combinations can produce a somewhat jagged effect, even with the anti-aliasing that all browsers apply. In my experience, the offender is dark backgrounds with lighter borders, particularly against off-white backgrounds, and is particularly pronounced in Safari, though it’s there in all browsers.

Here’s an image taken with Safari, that illustrates this with three different border radii:

Looks pretty good, but you can clearly see a slightly jagged effect to each corner. Now here’s those boxes again, this time with smoother corners:

And the difference? Simply split the colors between different elements — the outer element has the border and the specified border-radius, while the inner element has the background-color and a slightly smaller border-radius.

It’s a simple trick, and not a huge difference, but there definitely is a difference and a clear improvement, as you can see. I’m not entirely sure why it makes a difference, but I imagine it’s because of the way the anti-aliasing algorithms are applied; because each algorithm only deals with one color instead of two, or the way the now-separate anti-aliasings merge together; something.

If you’d like to poke around those examples in more detail, here are the live demos from which those screenshots were taken. But you can also see it right on this page — the categories tabs at the top, and the boxes down the right with dark-blue headers, all use this technique. I developed it while building these templates, because the jaggedness was bugging me!

And now they’re smooth as the proverbial baby’s bottom!

Photo credit: meltingnoise