Rounded Box for CSS Compliant Browsers

In this demo, the DIVs .ul and .ll are 15x15 left-floating blocks and the remaining spaces at the top and bottom are taken up by the .ur and .lr DIVs (also 15px-tall). This reserves our top and bottom padding area and gives us four targets for the four corner background images. The only thing left to do was minorly adjust the positions of the corners so they moved into the left and right padding areas of the main div and covered up its borders in the corners. This was done via simple relative positioning.

The Good:

• No extra IMG's or content is needed to provide the corner pieces
• Works well in IE/win (how far back I don't know)

The Bad:

• 4 empty DIVs are required in the markup of each rounded box (ideally we could get this to 0)
• Rounded box can't have top/bottom padding, though you may be able to add this by making the DIVs taller than their background images
• Opera 7 requires a block element before the bottom set of DIVs in the container.

Success: Mozilla, IE6, Opera7 (see above)