Valid Rounded Corners

Creating rounded corners on a div is a popular effect. However, one common way of doing this uses a CSS property that only works in Mozilla Firefox, and hence causes your CSS to be marked as invalid. There is however a simple way to create rounded corners; a way that works in every browser and is also valid coding. This method involves using graphics in conjunction with CSS.

In this tutorial I will show you how to employ this method to give rounded corners to a simple div. Of course you can extrapolate to apply this technique to more complex projects as well.

First, you need to use a graphics program such as MS Paint, Photoshop, etc. to create one image for the top of your div, and one for the bottom. These images should have rounded corners at the top and bottom, respectively. Make sure that the width of each image is the same as the width you would like you div to be. Also, you should save these images either in a transparent format or with a background color behind the extra space around the corners that is the same color as the background of your site will be.

Here are the images I have created:

Now it is time to employ CSS to create your rounded div. First, create an ID to house the top corners of your div. The width and height of this ID should match exactly the width and height of the image you are using for the top corners. This image should be set as the background of the ID. The following is what the code looks like for my image:

#top{
background-image: url('http://i93.photobucket.com/albums/l64/sk8rgrlrml21/top.gif');
height: 30px;
width: 400px;}

Do the same for the bottom corners of your div:

#bottom{
background-image: url('http://i93.photobucket.com/albums/l64/sk8rgrlrml21/bottom.gif');
height: 28px;
width: 400px;}

Next, you need to define an ID to finish the rest of your div. This will be what appears between the top and bottom corners. Be sure to use the same background color and width as your corner images. You can style other properties as well in this ID.

#main{
background-color: #949494;
width: 400px;}

Now that you have defined all the required ID’s, it is time to put them all together using HTML. Your code should look something like this:

<div id="top">
</div>

<div id="main">
Your content goes here.
</div>

<div id="bottom">
</div>

Congratulations! You now have a div with valid rounded corners that work in every browser.

The following is what a div with rounded corners looks like with the coding I discussed above. I have given it a height of 200 pixels so you can see it in action, but in reality whatever you fill it with will stretch it vertically instead, so no definition of height is necessary.

Good luck, and feel free to contact me with any questions.