Creating round corners using CSS

In a website, menus and small rectangular regions with round corners look impressive. It can be seen in several sites. But as a web designer I found that creating round corners are not as easy as it looks. Here is one method I found to make things easy:

First a preview of that you're gonna read about:



The HTML code:

<div class="windowFrame">
<div class="windowTopBar">
<img src="Images/cTL.png" class="imgL" />
<img src="Images/cTR.png" class="imgR" />
</div>

<div class="windowContentFrame">
Lorem ipsum... and other similar crap!
</div>

<img src="Images/cBL.png" class="imgL" />
<img src="Images/cBR.png" class="imgR" />
</div>

The CSS used along with this is:

.windowFrame {
width: 100%;
background-color: #BBBBFF;
margin-bottom: 10px;
text-align: center;
}
.windowTopBar {
width: 100%;
background-color: #0000FF;
height: 25px;
}
.windowContentFrame {
padding: 10px;
text-align: left;
}
.imgL {
float: left;
}
.imgR {
float: right;
}

The images cBL, cBR, tTL, cTR refer to the four corners. The size of these should be atleast 15px X 15px. Otherwise there will some strange vertical alignment problems. They are images that are rounded at the corners that will be placed at each corner. Here's a sample:


I've used .png images as they allow transparency. The above corners are perfect for a white background. Oh yes, the images must match the background. Should be careful about that. You can save those images and use it if you need them. They're not copyrighted... ;)

The above method can also be modified to include all the images in the CSS and not have any img tag at all. The advantage of doin this is the images will be at the background. When you try to select contents of the page, the corners will not get selected. In better words, the corners will look more merged with the background. But another disadvantage of this is you'll have to have 4 div tags and 4 classes. But the final output is the same.

CSS rocks!