Round Corners Using CSS

Tags:

I know it has been done many times before and there are lots of different ways to do it but here is a cross-browser compatible method using CSS and four small images to create round corners on a box. The box is easily resizable without breaking.

If you are looking for a methods that just works then this may be the answer for you.

Using this method you can create boxes either with or without a borders. You will need to adjust the offset of each corner depending on whether or not you have a border and how many pixels the border is.

This is a demo of a box with round corners using nested divs and four small images


The HTML
The CSS
The Images
left top image right top image right bottom image left bottom image