Round Corners

(Updated 6/25/02: IE5/Win compatibility note added)

You can read this article in Italian: Angoli arrotondati con i CSS.

See those interesting boxes below? - They're just built of images placed in a table, right? Well, not exactly. There are neither tables, nor images in the source code, only pure XHTML. Read about the benefits of this approach.

1. Floating Width And Height

Content of the box goes here.

The box can be of any width and height. The width of this one is 40% of its containing block.

2. Fixed Width, Floating Height

Content of the box goes here.

The box is 227px wide and its height accommodates to its content.

Tested in MS IE 5/6, Mozilla and Opera 6, OS Windows 98. Please report compatibility issues to marek@sovavsiti.cz. Thanks.

Benefits

Whenever I show this solution somewhere, at least one person comes and asks: "Oh, dear, eight nested DIVs! aren't good old tables, or absolutely positioned corner images better?" Well, I don't think so and here is why:

  1. The HTML source code is absolutely clean. Try viewing this page with styleshets disabled. It's very important for older browsers, palm-tops, etc.
  2. You can easily create a print stylesheet, replacing graphic corners and borders with simple CSS borders and no background color.
  3. You can go ahead and offer your users an alternate stylesheet with totally different border styles and/or colors.
  4. The source code is still much smaller than if it uses tables.

Notes

IE5/Win compatibility issue

Roman Pichlik pointed out that the first example is not rendered correctly in IE5/Win. I've fixed it by wrapping the inner content in another <div> and setting its width to 100%. See Moving Margins for details about this IE5/Win bug and possible workarounds.

Go Top

CSS Workshop home Recommended reading