I am sure atleast once in your career you have thought about how to create a ‘Round Corner Stretchable Box’ with minimum graphics. I have tried a lot and visited a lot of blogs and tried out lot of methods. I found the following one to be neat and simple. It hardly takes two minutes. Try it out.
First create four corner images and name them as lb (Left Bottom), rb (Right Bottom), tr (Top Right) and tl (Top Left).
Bottom Left 
Bottom Right 
Top Right 
Top Left
Once the images are ready, we can start the coding. Open you favorite HTML editor installed in your machine or open a Notepad application. We start with a CSS file. Following the same naming convention we used for images, the classes in CSS are also named similarly.
.bl {background: url(bl.gif) 0 100% no-repeat; width: 20em}
The “bl” class contains a background image, position of the image, no-repeat and the width of the box. Dont forget to link the CSS file you have created to the HTML page that you are creating, and place the following code in the right place:
<div class=”bl”>Lorem ipsum dolor sit amet consectetur adipisicing elit</div>
Here class”bl” is for Bottom Left corner and the HTML rule allow us to apply only one background image per tag. Now our box looks like this:
As second step we place the Bottom Right corner of the box. CSS code looks like this:
.br {background: url(br.gif) 100% 100% no-repeat}
This CSS rule is essentially the same as the last one, although now we’ve changed the position from the left to 100%, where previously it was 0%. Now to HTML, please look at this how we can tackle the situation.
<div class=”bl”><div class=”br”>
Lorem ipsum dolor sit amet consectetur adipisicing elit
</div></div>
Take a look at the box after the completion of step two.
Step three and four together. We are left with the top images and I hope you got a hang of what to be done. Yes we can go with the Top Right and then Top Left images. In the CSS code we declare:
.tl {background: url(tl.gif) 0 0 no-repeat}
.tr {background: url(tr.gif) 100% 0 no-repeat}
For HTML, yes like what we follow in step two, assign the top corner classes for the <divs>:
<div class=”bl”><div class=”br”><div class=”tl”><div class=”tr”>
Lorem ipsum dolor sit amet consectetur adipisicing elit
</div></div></div></div>
I am sure you wanna see how our box is shaping up. Take a look at it:
Now you know what more needs to be done. The final step, giving background-color to the box. The background colour must always be assigned to the very first CSS rule. This is because each CSS background rule is essentially a layer on top of the previous one. So, in this example, we have a layering order of br.gif, bl.gif, tl.gif and then tr.gif. But, in this example, the images don’t overlap, so we don’t really notice this layering effect.
By default, a background colour covers the entire <div> and will layer on top of any other previously assigned background images and/or colors. Therefore, if we place the Blue color in any <div> other than the first, it will be placed on top of the preceding images and will essentially cause them to disappear. Therefore, we must place our background-color: #0064E6 in the very first CSS rule:
.bl {background: url(bl.gif) 0 100% no-repeat #e68200; width: 20em}
Now we are done with the box. What left is the beautification steps. We can give padding for the box which is needed to prevent the text from overlapping on to the images. But to which <div> should we assign the padding CSS rule? Does it matter? Well, yes it does very much.
Whichever element we assign padding to, each of the elements inside it will inherit that padding. If we were to assign padding to the very first <div>, <div class=”bl”>, we’d get this effect. See how the box comes:
To get this padding to work 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}
Good work dude! Now you get what you want. Take a look at your creation.
Just before we say “Kudos” for the great work we done, one small tweak for the Internet Explorer. IE always creates headache and that is the reason why I shifted to FireFox. If we do the whole process the other way around, I mean the top first and the bottom later, we will have issues like the background-color sneaking out in some portions. Try it your self. The hacks for IE is:
.clear {font-size: 1px; height: 1px}
<div class=”clear”> </div>
Our final HTML and CSS code looks like this:
<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”> </div>
Here is the CSS that does everything for us:
.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}
