Rounded corners the easy way

Rounded corners
Rounded corners

Would you like to have boxes with rounded corners on your site? Would you like them to work without having to specify an absolute size for the boxes? Do you want the quick and easy fix which doesn’t require a lot of extra <div>? Are you satisfied if the solution works for everybody except the approximately 85% of internet users which uses a non-standards compliance browser?

If you answered yes to those questions, you should continue reading.

First you need to get the images that will act as the corners.

If you have a different background color than I do, change all the images to reflect that.

Then, assuming the box that you wish to “round” is encapsulated in a <div class=”sidebarbox”>, all that you need to add to your css-file is this

If you are using a standards compliance browser, you should be able to see the result in the sidebar to your right. If you use IE, you have to settle with the image at the start of the post.

If you need it to work in IE as well, there are plenty of solutions on the internet. Use the search box to the right and get funky with it. If you find a good one that doesn’t require you to specify the absolute size of the boxes, let me know.

More information

2 thoughts on “Rounded corners the easy way

  1. Update: As you might have noticed, this technique is no longer applied on this site. But the image should give you a good idea of how the result will look.

Comments are closed.