Haystack rounded corners demo

Keeping it simple.

Only one image is used: a transparent rectangle with (inverted) white rounded corners (see "rounded.png"), so that you can simply call the background-color you like for each box without having to use separate images. This has the disadvantage that the corners are not as smooth as they could be.

Remember, the extent to which the box can extend vertically or horizontally will depend on the height and width of the image. That's the price we pay for single-image simplicity. For this example, I used 2000x2000px. That's 6kB, but acceptable since the cached image would be used for every rounded box on the page or site.

Take a look at the CSS for this page.

Making it smooth.

For smooth corners, you'll have to wait for sufficient PNG-24 support in common browsers, or if you know the color you'll be using, make a separate image for each color, each image with the corners anti-aliased to their respective background-color. With separate images, you'll need to hook each to a separate class or ID.A comparison of aliased and anti-aliased rounded corners

Take a look at the CSS for this page.

Updated 2006-04-18

This page is an example, referenced from “My two cents on rounded-corner markup”, a post on The Haystack. ©2006 Stephen Hay.