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:

Three boxes with rounded corners, showing a slightly jagged effect to the anti-aliasing.

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:

The same three boxes, but with smoother rounded 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

Win an Annual Membership to Learnable,

SitePoint's Learning Platform

  • Wardrop

    CSS properties like border-radius and gradients seem a little out of place to me. Any CSS property which requires any sort of advanced rendering by a browser, such as anti-aliasing or gradient generation, seems to be out of the scope of CSS. Such properties leave too many possible implementation variables. Border-radius is a good example of such a property, as it’s appearance can vary quite a bit between browsers. Browsers already have enough responsibility by ensuring correct document flow and block positioning, only which in the last year have been relatively consistent across modern browsers. I think anything beyond solid fill rectangles and dotted borders are begging for inconstancy between browsers. It seems the more HTML and CSS progress, the more prone browsers are to be inconsistent between one another.

    One could argue that pixel-perfect rendering isn’t what HTML and CSS are intended for, but what designer doesn’t want a consistent look across browsers – well at least across modern browsers. The author of this topic is a good example of such a designer. The generated pixels which make up the anti-aliasing weren’t quite right, and obviously like the vast majority of web designers, he gave a damn and went about trying to fix it.

    Moving on to something slightly broader in scope, I can’t wait for the day when someone influential at W3C cracks, and calls for a complete overhaul of common web standards. For the last year, it’s become very obvious to me that HTTP, HTML, CSS and some of the other everyday web essentials are starting to look seriously dated, lost and incompetent at providing web designers and web application developers the tools they need to move the web forward.

  • http://www.magain.com/ Matthew Magain

    Just wanna give you props for using an example that incorporated a visual illusion … if you stare at the gap where four boxes intersect, you see dots appear at the other points of intersection! :)

  • Dino

    Shame that renders only in gecko :)

  • GuitarMantra

    Mr James Edward.

    This is not a good CSS article at all. You forgot to tell the above methods only works on browsers with support for CSS 3. Older versions of most of popular web browsers and all version of IE till now(ie8 is latest till the date) don’t supports CSS3.

    border-radius is CSS3 innovation.

  • http://www.brothercake.com/ brothercake

    @GuitarMantra: it’s not a good article because I assumed a level of professional knowledge among my readers? Most professional developers are perfectly aware of the fact that IE doesn’t support this. But all other modern browsers do, and have done for quite a while. This post was not intended as a newbie’s guide to border-radius, and I apologise if that’s what you’re looking for, because this isn’t it.

    @Dino: all modern browsers except IE support this.

  • Stephan

    I guess in CSS 4 this is feature going to work as intended. — Stephan

  • skotmb

    What a cool little trick. Thanks, James. Look forward to trying it out. Much props.

  • mooch

    James,

    Nice tip! Another thing you can use to split the color difference is my fav, RGBA! I use it all the time. If you wan’t to add support for the invalid browsers like your commenters seem to enjoy, that’s pretty easy too.

    Keep pushing CSS3 & HTML5! The more things rendered by the browser the better. I would much rather have a button that loads instantly and can work in any language, with rounded borders, gradients, transparencies, text & box shadows than a .gif file that takes twice as long to generate (do I need to open photoshop AGAIN??), twice as long to download, adds an additional http request, and only works in one language! And the best part is, if someone insists on using a completely irrelevant piece of software to browse the internet, well they can still use the button. It’s just one color and a square. If the user does not value their browsing experience enough to download a superior, FREE application, why should I work harder for them, all the while lessening the experience for every other sensible visitor to my domain?

    It’s always the ones who are too lazy, or too afraid to learn the new tech who scoff at using it and try to tell intelligent developers to lower their standards.

  • rams

    Hi,

    These are nice tips, its has become a tradition for me to start my day in office with your site, i do visit it often during day too,

    this post seems some issue in IE 7 and 8, with comments, all looks prefect in firefox but a mess here in IE,

    Please look in it, and continue the good job you are doing,

    cheers!
    rams

  • dusoft

    no difference for me whatsoever – ff 3.6

  • Richard

    It’s amazing how many people in the web community aren’t interested in CSS3. I think border-radius most definitely has it’s place. It’s strictly presentational, so it doesn’t really matter if you’re stuck with a less worthy browser that won’t round your corners.

    That said, for a recent project I needed rounded corners for something – I used CSS3 properties for all the decent browsers and gave a conditional jQuery solution to those stuck with IE. That, to my mind, was a pretty awesome solution! I’ve used images in the past – especially when used in combination with a drop shadow, but I guess a similar solution could be possible there too.

    I’ve even been mulling over the idea to keep all my CSS3 in a separate .css file so that I can validate everything else..!

  • http://www.brothercake.com/ brothercake

    I don’t think CSS validation is important, personally. HTML validation matters, because HTML is content, and interoperability of content is of primary importance. But CSS is the presentation layer, and interoperability there is not important – it doesn’t matter if your site looks different in different browsers, ergo CSS validation is not important.

  • Anonymous

    I’ve never tried the border-radius property for rounded borders. I build sites for a mostly creative and eclectic people and they implicitly love rounded corners. I’d give them the same design with rounded corners vs square and they would hate the one and love the other but had no idea why :). I did.

    Anyway, I’ve always used background images for rounded corners and hasn’t given me any trouble. I might try this method next time as if it works well then would save a lot of download time. One problem would definitely be if it wouldn’t work in IE 7? Many people are still using IE6 which I reluctantly don’t worry about anymore, but there is no way I can’t ignore IE7 yet. I also don’t want to rewrite rules just for 7 because that will just be pointless in the end.

    So I’ll experiment with it but probably won’t include it until the end of 2011 when majority of IE users should be at IE8.