CSS

 Basic Rounded Corners

There are loads of different ways of doing rounded corners some really hard but some methods are very simple. For this tutorial I will show you a basic method that will work in every browser. This method uses images so we would use two images one for the top part and one for the bottom so as we fill the main with content the height will expand.

So first you will need the images for the top and bottom which can be found in the source code zip.
Start by tying up this HTML

and add the CSS

The wrapper is just to position all content in the middle incase you want to add something extra. Inside the main div we just set dimensions and the background colour. Next we set the dimensions for the mainTop and mainBottom which are the images sizes. Lastly we set the background images to the main parts.

The best bit about this method is that its simple and if you change the height it will still work.