Rounded Box for CSS Compliant Browsers

Methods: 1 , 2, 3

Method 1: Float, Fill Remaining Space & Relative Positioning

<div class="roundedBox">
<div class="ul"></div><div class="ur"></div>

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:

The Bad:

Success: Mozilla, IE6, Opera7 (see above)

<div class="ll"></div><div class="lr"></div>
Here the last contents is in a block before the bottom DIVs (Opera7 friendly).
Here the container only has inline content (Opera7 fails).