Rounded Corners Using CSS Technique
This is a neat lil trick, that doesnt take to long to do, but makes a site look that much more professional.
It works across browsers, and is used quite often.
It may become obsolete once IE and other browsers decide to support the new set of CSS3 specs. Until then this is a good technique to depend on. If designing for Mozilla based browsers, there is a css property in the making named border-radius.
-moz-border-radius will allow you to set a rounded border on any block object.
This technique however, involves using 4 images and 3 divs.
Here are the images we will be using:
Top Left
Top Right
Bottom Left
Bottom Right
Open up notepad, or notepad++, or whichever editor you use.
Type
<html>
<head>
<title>Rounded Corner Tutorial</title>
</head>
<body>
<body>
<html>
In the head section add:
<style>
body{background-color: #e0e0e0;} //these are zeros not o's
</style>
Save as .html and view it in your browser. You should have a gray page.
Now, between your body tags type this
<div id="roundDiv">
This is the content
</div>
And add this to your style definition
#roundDiv{background-color: white; width: 800px;}
Now, previewing in browser you should see a gray page with a white div containing the words "this is content".
We are going to add a div to roundDiv. Since this is the first item in round div, it starts at the top left corner.
In this top div, we will add the image for the top left corner.
Add this to roundDiv Before "this is content"
<div class="roundTop"><img src="tl.gif" class="corner"/></div>
After this line would come the content.
Add this to roundDiv After "this is content"
This holds your bottom left image
<div class="roundBot"><img src="bl.gif" class="corner"/></div>
Now, between your style tags add this definition
.corner{display: block; width: 16px; height: 16px;} //use your actual values here, for this example our images are 16x16
So far our html page should look like this:
<html>
<head>
<style>
body{background-color: #e0e0e0;}
#roundDiv{width: 800px; background-color: white;}
.corner{display: block; width: 16px; height: 16px;}
</style>
</head>
<body>
<div id="roundDiv">
<div class="roundTop"><img src="tl.gif" class="corner"/></div>
This is content
<div class="roundBot"><img src="bl.gif" class="corner"/></div>
</div>
</body>
</html>
If you preview this in your browser you should see a white div, with rounded corners on the left side.
This in itself is a neat div and you don't have to add the right corners. This effect is good in itself.
To get the rounded corners we really want, we are gonna set a background image on the top and bottom divs.
We will set a background image url, set it to not repeat/tile, and set its position accordingly.
To your style tags add this definition for the top right corner
.roundTop{
background-image: url('tr.gif');
background-repeat: no-repeat;
background-position: top right; // specify to align top, and to the right of the div
}
Now for the bottom right corner
.roundBottom{
background-image: url('br.gif');
background-repeat: no-repeat;
background-position: bottom right; // specify to align bottom, and to the right of the div
}
Your entire html file should look like this:
<html>
<head>
<style>
body{background-color: #e0e0e0;}
#roundDiv{width: 800px; background-color: white;}
.corner{display: block; width: 16px; height: 16px;}
.roundTop{
background-image: url('tr.gif');
background-repeat: no-repeat;
background-position: top right; // specify to align top, and to the right of the div
}
.roundBot{
background-image: url('br.gif');
background-repeat: no-repeat;
background-position: bottom right; // specify to align top, and to the right of the div
}
</style>
</head>
<body>
<div id="roundDiv">
<div class="roundTop"><img src="tl.gif" class="corner"/></div>
This is content
<div class="roundBot"><img src="bl.gif" class="corner"/></div>
</div>
</body>
</html>
This is the result (low-quality pic):
And there you have it, easy rounded corners!
