Round Corners Using CSS

Keywords:
22 Apr 2007

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

About Us

NZ Web Hosting Internet Technolgies Blog.

Website design, website development, promotion and search engine optimisation.