Round Corners with CSS

Let’s start with a ’rounded-corner’ tutorial. In this tutorial you’ll learn how to make them. This isn’t the only method there is to produce round corners; this is just the method I use.

First, make two files, called index.html and roundcorners.css. We willl start with the index.html. The code provided isn’t everything you should have in your index.html. You should know how to add structure in your document. If not, please download the final code at the end of this tutorial.

This is very simple. We start with a DIV with id box. This is the box where all the elements of the box will appear in. In this box, we’ll add the corners and the content. Take a look below to view the codes.

<div id="box"></div>

As you can see, I have structured the document. I think this should be very easy to follow and the HTML part has been finished now!

We will continue with the CSS. Open up your roundcorners.css file now. You should understand we use images to give the box its round corners. I will use the following images.

top-left.gif
top-right.gif
bottom-left.gif
bottom-right.gif

CSS

body{
background-color: #CFCFCF;
}
#content{
float:none;
padding:20px 20px 0 20px;
}
#box{
width:300px;
background:#ffffff;
}
#top-left{
width: 19px;
height: 16px;
background: url(images/top-left.gif) top left no-repeat;
float:left;
}
#top-right{
width: 22px;
height: 22px;
background: url(images/top-right.gif) top right no-repeat;
float:right;
}
#bottom-left{
width: 22px;
height: 16px;
background: url(images/bottom-left.gif) bottom left no-repeat;
}
#bottom-right{
width: 22px;
height: 21px;
background: url(images/bottom-right.gif) bottom right no-repeat;
float:right;
margin-top:-21px;
}

As you can see, I’ve placed the div with id top-left at left (with float:left;) and made the div as small as the image itself. With the background style attribute I define a background (top-left.gif) and as you can see when you have done this too, it’ll display a perfect top left round corner (the perfection level of the round corner depends on your designing skills of course).

What I did next, is just repeat this step with all the divs and only change some small things. With top-right you should use float:right; and define another background image but the logic behind it stays the same.

I hope you like the outcome and keep experimenting!

index.html | roundcorners.css (right click > save as to download the files)