[MaestroX]

This tutorial gives you the resources to create your very own boxes with rounded corners.

This method involves creating a container and nesting div tags to layer images in the corner. You are free to modify the images and css to create different colour boxes.

The HTML

<div class="rounded_box">
   <div class="rounded_top"><div></div></div>
      <div class="rounded_content">
        Lorem ipsum dolor sit amet, consectetur 
        adipisicing elit, sed do eiusmod tempor incididunt 
        ut labore et dolore magna aliqua. Ut enim ad minim 
        veniam, quis nostrud exercitation ullamco laboris 
        nisi ut aliquip ex ea commodo consequat. Duis aute 
        irure dolor in reprehenderit in voluptate velit esse 
        cillum dolore eu fugiat nulla pariatur. Excepteur 
        sint occaecat cupidatat non proident, sunt in culpa 
        qui officia deserunt mollit anim id est laborum.
      </div>
   <div class="rounded_bottom"><div></div></div>
</div>

The CSS

.rounded_box {
   background: #cccccc;
}
.rounded_top div {
   background: url(rounded_tl.png) no-repeat top left;
}
.rounded_top {
   background: url(rounded_tr.png) no-repeat top right;
}
.rounded_bottom div {
   background: url(rounded_bl.png) no-repeat bottom left;
}
.rounded_bottom {
   background: url(rounded_br.png) no-repeat bottom right;
}
.rounded_top div, .rounded_top, 
.rounded_bottom div, .rounded_bottom {
   width: 100%;
   height: 30px;
   font-size: 1px;
}
.rounded_content { margin: 0 30px; }

Be sure to add the url to the images on your server

The Images






The Result



If you don't have a graphic editing program to change the colours of these simply request the following and I'll make them for you:

Background Colour: #??????
Box Colour: #??????