Phil Benwell - Internet Student

Rounded corners create a great effect on web pages and are sometimes required to continue the feel of a web page.

There are many ways of creating rounded corners in HTML and CSS, this is a simple one where the width of the container is specified. We are going to create a rounded container with a width of 300px.

Step 1 - Create 2 graphics 300px wide with rounded corners, one for the top and one for the bottom, like these:

Remember - to create the bottom one just rotate the image by 180 degrees and re save the file.

Step 2 - Create the HTML Code:

<div id=”top”>
</div>
<p class=”content”>This is my box with rounded corners</p>
<div id=”bottom”>
</div>

Step 3 - Add the following styles to the div and the p tag:

#top {
margin:0;
padding:0;
width:300px;
height:50px;
background-image:url(images/top.gif);
background-position:top;
background-repeat:no-repeat;
}

#bottom{
margin:0;
padding:0;
width:300px;
height:50px;
background-image:url(images/bottom.gif);
background-position:bottom;
background-repeat:no-repeat;
}

.content {
color:black;
background-color:white;
margin:0;
padding:0;
text-align:center;
width:300px;
height:50px;
}

Step 4 - View the results. I have put the code and outcome on a test page here.

What we have done is create a div to hold each the top and bottom images and used the class to line up the paragraph with these images. This may not be the best way but it sure is a quick way to create the rounded corners effect. I will post other methods up over the next few weeks.