Hello!

This tutorial will illustrate how to create a variable width/height box with a background image and rounded corners via CSS.

The solution is very easy, and the box created can be easily modified and shaped according to different widths and heights required.

First: You need a PSD file or an image with the entire box.

Second: You need to have an HTML file, a CSS file, and the images folder.

Okay, so the HTML structure will look like this:

THE XHTML

The first line is the container of the box.

<pre>
<div>
<div><div><div><div><div><div><div><div>
<div>
&nbsp;
</div></div></div></div></div></div></div></div></div>
</pre>

The second line is a helpful CSS class helper and it shows in the code what that div is doing.

The logic is: top bar, bottom bar, left bar, right bar, bottom-left corner, bottom-right corner, top-left corner , top-right corner. The .innerRoundBorder is another helpful CSS class --  you can chain your CSS so that you don't have to have large specificity. The fact is that this technique is based on the specificity of the CSS, as you will see in the following CSS file below.

The PSD will be sliced like this: the corners, and then a section of each of the 4 bars, the heights must be identical of the bars, ie. the top-left corner, the top-bar, the top-right corner all of them must be of equal height, and ie. the top-left corner, the left bar, bottom-left corner (for these the width must be identical).

The CSS:

 .roundedBorder {
 /* heights width are set here like */

 width: 300px; height: 300px; /* or */ width: 150px; height: 500px;
 /*  or something you want, and if the lines are simple and have a simple background,
 the background-color of the INNER BOX must be set HERE, like */ 
background-color:  #f2f2f2;}

To tell others who may work on the code after you, you can put a small comment at the top like this:

/* border logic
t
t b
t b l
t b l r
t b l r blc
t b l r blc brc
t b l r blc brc tlc
t b l r blc brc tlc trc
*

.roundedBorder .border {  background-image: url("./images/topBar.png");
 background-repeat: repeat-x; background-position: top center;}
.roundedBorder .border div { background-image: url("./images/bottomBar.png");
 background-repeat: repeat-x; background-position: bottom center;}>
.roundedBorder .border div div { background-image: url("./images/leftBar.png");
 background-repeat: repeat-y; background-position: left center;}
.roundedBorder .border div div div { background-image: url("./images/rightBar.png");
background-repeat: repeat-y; background-position: right center;}
.roundedBorder .border div div div div { background-image: url("./images/bottomLeftCorner.png");
 background-repeat: no-repeat; background-position:  left bottom;}
.roundedBorder .border div div div div div { background-image: url("./images/bottomRightCorner.png");
 background-repeat: no-repeat; background-position: right bottom;}
.roundedBorder .border div div div div div div { background-image: url("./images/topLeftCorner.png");
 background-repeat: no-repeat; background-position: left top;}
.roundedBorder .border div div div div div div div { background-image: url("./images/topRightCorner.png");
background-repeat: no-repeat; background-position: right top;}
.roundedBorder .border div div div div div div div div { background-image: none;}
/* THIS IS VERY IMPORTANT, MAKES SURE NO IMAGES WILL SHOW TO INNER DIVS */

This technique can be used both on large scale and on small scale, however it's best not to exaggerate a lot as the number of divs gets exponentially larger.

The 2nd way to make rounded corners is by using the jQuery framework and the jQuery Corner Plug-in. The explanations on its website will be sufficient enough to get you started, but if you require more info post a comment and I'll see what I can do.

Best Regards.