Rounded corners with CSS3 ~ border-radius

If you’ve designed websites before you know what a pain making rounded corners on a box can be. You can make an image of a box with rounded corners in Photoshop and use it as a background-image on a div. The problem with this is that the content can’t ever become wider or longer, or it would be outside the box.

You can make separate images for the top rounded corners, the middle content section, and the bottom rounded corners. With this method you make the middle background image repeat on the y-axis as the content grows longer, which forces the box to grow and the bottom rounded corners to expand.

That’s a much better option, but still takes some time to create the images and set up the box. And of course if you want to change the color of the box or border you need to create new images.

And then there was CSS3. One of the most exciting things of the new CSS3 spec is “border-radius”. What this means is that you can define the radius of any of the corners of a box, creating rounded corners. This is of course the ultimate, since the colors of the box and borders can be changed; and the box can grow wider and longer as content is expanded or enlarged. As with the other CSS3 features, all browsers don’t support this yet. So at this time it’s best to use it in situations where it helps visually, but doesn’t destroy the design if it doesn’t work in a browser. For example, check out the top of my twitter page in Internet Explorer (which doesn’t support border-radius), and Firefox (which does).

You can see how in Internet Explorer the rounded corners do not appear. In Firefox they do. It doesn’t change the usability of the site if the corners don’t show up, it just looks better when they do. Another example of this is on my website. I use the border-radius for the breadcrumb navigation. See it here. The links show the rounded corners in compliant browsers, and will be a box with straight corners in non-compliant browsers. It’s like a treat for people with current browsers.

Here is how to use CSS border-radius.

You’ll notice how you need to write slightly different code for Mozilla and WebKit based browsers. Eventually all browsers should all support rounded corners and universal code will be created. But even writing two different extensions like I showed above is a lot easier than creating multiple images.