If there’s one thing that the internet has taught us in the twenty or so years it’s been alive, it’s that everybody loves rectangles with rounded edges. It all stems from the age old human condition that we need things in boxes- we need order and division, organisation and categorisation, but at the same time we’re not quite willing to accept our brains are like this. We want to pretend we can “think outside the box,” that we are maverick, free thinking non-comformists.

Che Guevera in a rounded box. "Look Mom, I am an individual!"

We want to pretend we are not putting things in boxes, that we are doing things are own way. The rounded corner is a symbol of our imaginary human individualism, screaming to the world that we are not conforming, we haven’t been forced into the box. But, when all’s said and done, the box remains.

Erm, anyway, pop-psychology out of the way, rounded edges are so successful in web design because computers and design code mean we have to use a grid-based layout of some kind, with divs and spans all in rectangles, and all these boxes start to look tired and dull on the eye. Rounded edges are a nice, quick way to spruce up boxes whilst still being able to maintain the sensible, grid based structure such geometries require.

How do we do it then?

As with everything in web design, there are many ways to achieve your goal here. The old way was to use four corner divs for every box, and use a .png of each corner segment as a background image. I spent many hours in the olden days using this method, only for the client to say they want a different shade of blue for the boxes and I would have to crank up Photoshop and make some more.

Nowadays, with css3 becoming (almost) mainstream, life is simpler. The css mark-up is as so:

So, we see it’s not quite homogenised yet, and to be sure you’re better off putting all four of these lines into your css file. And even then, we have problems with Internet Explorer. My recommended solution for this is the awesome javascript creation CurvyCorners.js. This javascript file will auto-detect if the browser being used can deal with CSS3, and if it can’t it will invoke curved corners on all elements in your CSS file that have border-radius defined.

This is good news, because all you have to do is link the .js file in your header, and do nothing else.

In this day and age we shouldn’t have to worry about rounded corners. If you keep this method in your head you won’t have to worry about it any more. Sooner or later the javascript won’t even be needed as all browsers will be CSS3 compatible, but until that day, use these two easy steps.