CSS Rounded Corners

---

Code rendered in your browser is below. If you see strange behavior not already documented, please send me a screen shot.

This Browser: Unknown Unknown (Unknown)

Test Content

See an example of the code isolated on a page

---

CSS Code

.textBox {
    background:#9cf url(/assets/images/boxes/question-box.gif) left top no-repeat;
    /* Width attribute needed to fix behavior in Internet Explorer */
    /* width:100%; */
}

.textBox .d1 {
    background:url(/assets/images/boxes/question-box-right.gif) right top no-repeat;
}

.textBox .d2 {
    background:url(/assets/images/boxes/question-box-bottom.gif) left bottom no-repeat;
}

.textBox .d3 {
    background:url(/assets/images/boxes/question-box-corner.gif) right bottom no-repeat;
    padding:1em;
}

HTML Code

<div class="textBox"><div class="right"><div class="bottom"><div class="corner">
    <p>It is easy to create a resizable box with rounded corners using Cascading Style Sheets (CSS). Four nested &lt;div&gt; elements are required, each having a background image respectively set to the left-top corner (including the body), right edge, bottom edge, and right-bottom corner.</p>
</div></div></div></div>

---

Firefox 1.5.0.1 (Windows)

---

Opera 8.51 (Windows)

---

Internet Explorer 6.0 (Windows)

An isolated box without the width attribute in the CSS:

Additional strange behavior where the main and right graphics bleed through to the following content:

---

Internet Explorer 7.0 Beta 2 (Windows)

An isolated box without the width attribute in the CSS:

Additional strange behavior where the main and right graphics bleed through to the following content: