Create a Complete Website Template with Rounded Corners Using Css and Html

The Objective of this tutorial is to show you how to create a website with a rounded corners template with CSS and HTML using as few images as possible.

When I was new to web design, I always had issues making templates with rounded corners without using heavy images. This way of doing it was very simple, the page is stretchable, that means you can put in as much content you want in the middle and right columns and the page will stretch as long as you take it, followed by the footer. The CSS Navigation is quite simple yet I think its really good, I hope you like it too. Actually a friend on the site asked me to update his template. I thought a clean, professional looking template would do better than what he currently had. I just made the template and added all his content to it.

I have gathered and zipped the images used in the CSS to create this webpage, they can be downloaded here, a complete working demo html file is also available in this zipped file. You can preview a demo of the page you will be creating here. Please keep in mind, the content and the header image added was just to show how it could look. You can feel free to add your own images and contents to it to come up with something really good.

For someone who is a newbie at this, through out the tutorial, when I tell you that this is the CSS we are going to add, it will be added here after we open the ‘style’ tag and before we close the ‘style’ tag:

<style type="text/css">

For example, let’s add the body style, so the browser knows how to align and what background color we want on our website, and that the page has no margin on any side, you will add it like this:

Notice that you have written the name of the style, followed by the open curly bracket ‘{‘ written the codes and their values and then closed the style with the closed curly bracket ‘}’ You will always add another style after this closed bracket.

Now you set the body fonts and the color of links to be used throughout the website.

Here, you choose to have the regular font color as black, and the font family throughout the page to be verdana. You can choose different fonts, choose to have your text aligned as you wish or have a bigger or smaller font size depending on what you prefer:

You can also set different settings for links in different parts of your website, for example if I want the links in my footer to stand out from the rest of the page, I choose them to be a different color:

Define the global width of the page to the browser, this width is the size of the image you should use on the top and bottom of the page to make the rounded corner style, the images provided with this tutorial are of 914px width, if you want to increase or decrease you will have to toggle the width according to your images here, and throughout the CSS, because the global style is defining the exact amount of space our website contains:

.global {
width:914px;
margin:0px auto;
text-align:center;
}

This is where you make the rounded corners on top, the ‘content_out’ layer is being used to give a little white space, however, the ‘content_top’ layer has the image in the background that gives the rounded effect. You will find the image in the zipped file available on the first page:

Leave another Line Break to separate the header from the navigation, then add the header image, this image could contain your logo and a little about your company etc. It should be around 800px in width or as you would want, you could do a lot of things:

You can add the content you wish to see on the main column here. Then you will close the main column with the /div tag and start the right column:

</div>
<div id="columnright">

You may add the content you wish to see on the right side of the page here. Then close the right column tag.

</div>
<!-- END: Content -->

Here you will close two more tags, the ‘content’ tag and the ‘content_out’ tag:

</div></div>

FOOTER:

The last thing to do is to create a footer, you can choose to have links in your footer(as shown below) or you can choose to go with only a copyright or a link or just leave it empty if you want, however, it is always recommended to have footer links.

On the first page, I showed you how to define the colors of the footer links to make them stand out. Now you just have to define the footer background and align the text in center so it is aligned properly: