Sunday, February 05, 2006

Boxes With Rounded Corners in CSS - Solution

Image


CSS Code



.textBox {
    background:#9cf url(/images/question-box.gif) left top no-repeat;
    /* Width attribute needed to fix behavior in Internet Explorer */
    /* width:100%; */
}
.textBox .right {
    background:url(/images/question-box-right.gif) right top no-repeat;
}
.textBox .bottom {
    background:url(/images/question-box-bottom.gif) left bottom no-repeat;
}
.textBox .corner {
    background:url(/images/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>

See screenshots at http://www.threeleaf.com/freelance-work/demos/round-corners/ , along with some examples of why the workaround is necessary in Internet Exploer 6 and 7. My question: Why don't they fix that? If less funded browser companies like Firefox and Opera have come up with solutions, why can't Microsoft?

No comments: