Padding

Padding is needed to prevent the text from overlapping on to the images, which are 10px by 10px in size. Therefore we need 10px worth of padding on the text. But to which <div> should we assign the padding CSS rule? Does it matter? Well, yes it does. Whichever element we assign padding to, each of the inside elements will inherit that padding. If we were to assign padding to the very first <div>, <div class=""bl">, we'd get the following:

To get this padding working properly, we need to assign it to the very last <div>, <div class="bl">:

.tr {background: url(tr.gif) 100% 0 no-repeat; padding:10px}

Internet Explorer issues

You may have noticed the bottom corners were called up before the top two corners. If we were to do this the other way round, that is call up the top corners first, some parts of the orange background colour sneak out under the bottom curves causing a rather unsightly effect. Switch the order of the <div>s around and see for yourself.

Another issue in Internet Explorer is that the background colour of the box sometimes overlap on to the element below, again causing a highly unsightly effect. This can be simply solved by placing a tiny placeholder beneath our box with round corners. Immediately after the fourth closing </div>, insert the following HTML:

<div class="clear">&nbsp;</div>

And assign it this CSS rule:

.clear {font-size: 1px; height: 1px}

The final code

Our finished HTML now looks like:

<div class="bl"><div class="br"><div class="tl"><div class="tr">
Lorem ipsum dolor sit amet consectetur adipisicing elit
</div></div></div></div>
<div class="clear">&nbsp;</div>

And the CSS that makes it all happen:

.bl {background: url(bl.gif) 0 100% no-repeat #e68200; width: 20em}
.br {background: url(br.gif) 100% 100% no-repeat}
.tl {background: url(tl.gif) 0 0 no-repeat}
.tr {background: url(tr.gif) 100% 0 no-repeat; padding:10px}
.clear {font-size: 1px; height: 1px}