Rounded corners with borders -- FF, IE 6 & 7

This template is based on the technique provided by airtightov.com, and adds borders by modifying the base image and the "div" structure. The page is a learning exercise in styling. This is content in the middle - fluid width. Just to demo this, here is a load of padding text to make it overflow onto a new line, not encroaching into the side columns.

This example of a content block with rounded corners uses 1 image and limited markup. There is some non-specific IE6|7/Win CSS "fiddling" to cope with IE's "height" implementation, but no "hacks" or "conditionals".

The image is readily changed to provide for different border, content and body background colours. Almost any graphics program with a "flood-fill" capability will easily change the three colours.

The image can be created in Photoshop, Corel Draw or similar by:

1. Creating a new document that is 2x the radius of the curve of your corners. In this case, 30x30px.
2. Set the background colour to the body colour of your page. Draw a circle (30x30px) and fill it with your content colour.
3. Use the offset filter to shift the image 15 pixels in both directions with Wrap Around selected; or otherwise to form the image shown.
4. Save/Export the image as a "gif".
5. Finally, the borders are provided by "pixel-editing" the gif at the edges between the content and body colours.

The example image may be downloaded and used as a template.

The design is reasonably resilient to text-size changes.