The Code for Decent Browsers

The first thing to do is pick a unique style id for the rounded corners. This id will be used to find the right corner images for IE, so it needs to be unique considering the rounded block’s background color, border style, and background the block is sitting on top of.

First, the HTML. Wherever we want to have a rounded block, use the following elements:

<div class="rounded_STYLE rounded">
  <div class="tl"></div>< div class="tr"></div>
  ... contents of the block go here ...
  <div class="bl"></div>< div class="br"></div>
</div>

STYLE should be the unique style ID you chose. The empty tl and tr divs are the top left and right corners, while the bl and br are the bottom right. Those divs are not used at all in a CSS3-aware browser, but they are needed for IE’s image corners.

For a CSS3 aware browser like Safari and Firefox 3, this element can be styled very simply:

.rounded_STYLE
{
    background-color: COLOR;          /* if needed */
    border: 1px solid BORDER_COLOR;   /* if needed */
    -webkit-border-radius: RADIUS;    /* for Safari */
    -moz-border-radius: RADIUS;       /* for Firefox */
}

RADIUS would be something like 4px. And that’s it, you’re done in Firefox and Safari.

The Code for IE

Life would be good if we could stop there, but unfortunately the depressingly incomplete and non-standard IE remains the favorite of a majority of users… At least usage of IE6 has dwindled to the point where we no longer have to worry about pixel perfection there. And that opens the door for a decent solution in IE7 and above.

Did I mention that the HTML is the same? Yes I did. But we do need different CSS. Somehow, you need to hide the CSS for .rounded_STYLE above from IE, and feed it the following instead. On BestInClass.com we use dynamically generated CSS to do this, but you could use IE conditional comments as well.

.rounded_STYLE
{
  background-color: COLOR;            /* if needed */
  border: 1px solid BORDER_COLOR;     /* if needed */
  position: relative;
}

.rounded_STYLE > .tl, .rounded_STYLE > .tr, .rounded_STYLE > .bl, .rounded_STYLE > .br
{
  width: RADIUS;
  height: RADIUS;
  position: absolute;
}

.rounded_STYLE > .tl
{
  background: url(/images/ui/rounded/STYLE-tl.png) top left no-repeat;
  top: OFFSET;
  left: OFFSET;
}

.rounded_STYLE > .tr
{
  background: url(/images/ui/rounded/STYLE-tr.png) top right no-repeat;
  top: OFFSET;
  right: OFFSET;
}

.rounded_STYLE > .bl
{
  background: url(/images/ui/rounded/STYLE-bl.png) bottom left no-repeat;
  bottom: OFFSET;
  left: OFFSET;
}

.rounded_STYLE > .br
{
  background: url(/images/ui/rounded/STYLE-br.png) bottom right no-repeat;
  bottom: OFFSET;
  right: OFFSET;
}

Here RADIUS is again something like 4px and STYLE is the unique corner style id you chose. OFFSET should be set to -1px if you have a 1 pixel border for the element, or 0 if there is no border.

The CSS references four different corner images. In this example, they are located on the path /images/ui/rounded.

Making the Corner Images

You could generate these images using PhotoShop or another image editor. At least on a Mac, there is a much easier way for the non-PhotoShop savvy using the Preview application.

1. Display your page in Firefox and take a screenshot of one of the corners.
2. Open the screenshot in Preview. Zoom in so that you can see the pixels clearly.
3. Select a square that is no bigger than RADIUS on a side and which is aligned with the straight borders of the element.
4. Copy and New from Clipboard.
5. Save this corner in your /images/ui/rounded directory using the name STYLE-CORNER.png where CORNER is tl, tr, bl, or br depending on whatever corner you chose.
6. Use Flip Horizontal and Flip Vertical to generate the other three corners and repeat.

Congratulations, you should now have attractive anti-aliased rounded corners in all modern browsers, with Firefox and Safari users able to enjoy faster browsing without millions of teeny corner images clogging up the internets. Plus, you have the satisfaction of being future-compliant with CSS3 as it becomes increasingly available.