[MaestroX]

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

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">
         <p>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.</p>
      </div>
   <div class="rounded_bottom"><div></div></div>
</div>

The CSS

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

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: #??????
Border Colour: #??????
Border thickness: ?px

[Norman]

Nice. Thank you, MaestroX.

[vandelay]

Sorry, I'm new to vB.

I'm not sure this is what I want... what I'm trying to do is have rounded border around the nav area and posts etc like this board does.

Any help is appreciated!

[DDL]

You'd need to edit your template and do something similar to what MaestroX posted in this thread. As an alternative, I believe all of the skins here on vB Skin Zone have rounded corners/boxes.