Ever wanted to know how to create smooth rounded DIV or table boxes for your site using CSS? If you find the squared off windows of the Wikilime cart a bit dull then you can bubble them up a little using some CSS and imagery magic.

1. First off you need to create an image that’s going to be used for the rounded table or DIV. This needs to look something similar to this image. The width of the image will need to be exactly the same width as you want the table or DIV to be.

2. You then need to upload the image to some web space so that you can link to it from your CSS. There are many image upload sites on the net, an example is www.screenshots.cc. Once you have uploaded your image you just need to make a note of the image URL.

3. Now for the CSS. In this example we will change the menu boxes that appear on the right hand side of your store. So firstly we want to give the top some rounded corners;

#smallBoxTop {
background-url(http://the-url-of-your-image.jpg);
background-position: top left;
background-repeat: no-repeat;
padding:6px;
height:50px;
}

Then we need to give the bottom some rounded corners;

#smallBoxBot {
background-url(http://the-url-of-your-image.jpg);
background-position: bottom left;
background-repeat: no-repeat;
padding:6px;
height:50px;
}

And finaly we edit the middle of the table or DIV so that it matched the image we created;

#smallBox {
background-color:#abbfab;
border: 3px solid #798579;
border-top:none;
border-bottom:none;
padding:6px;
height:150px;
}