Airtight

CSS Rounded Corners

The image

The CSS

The HTML

This example of a div with rounded corners uses 1 image and limited markup.

The image is easily created in Photoshop 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 colour of your page. Draw a circle (30x30px) and fill it with the colour of your corners.
  3. Use the offset filter to shift the image 15 pixels in both directions with Wrap Around selected.

The styles for each corner will shift this 4-corner graphic into the proper position for each instance.

Back to my blog