By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

Rounded Corners

How to create Rounded Corners using BlueBodens border technique.

Edited: 2011-08-17 05:24

The normal way to go about creating rounded corners in a fixed layout, is to cut an image into 3 parts: top, center, bottom.

This however won't work for scratch-able layouts, and most techniques covering this aspect, will take advantage of hacks.

Border Technique

I managed to come up with a technique, using nothing less then a bit of extra mark-up. The technique takes heavy advantage of CSS position, and additional divs, to create borders, and corners using images.

Each background-color represent its own part of the image, you will need to cut your image into a total of 9 separate parts for it to work. Check it out: BlueBoden's BorderTechnique