I’ve been looking into several ways to create rounded corners on websites with css.
And the nicest way I found untill now, is without images, using only css and javascript.
It’s really clean and nifty. I already tested it on different browsers and it’s also ie6, ie7, firefox, safari - proof.

First u need to include 3 files.
<link rel="stylesheet" type="text/css" href="niftyCorners.css">
<link rel="stylesheet" type="text/css" href="niftyPrint.css" media="print">
<script type="text/javascript" src="nifty.js"></script>
The Javascript
window.onload=function(){
if(!NiftyCheck())
return;
Rounded("div#header","transparent","#C3D9FF","small");
Rounded("div#box","#FFF","#E4E7F2");
}
The css
body{
padding: 20px;
background-color: #FFF;
text-align: center;
font: 76% Verdana,Arial,sans-serif;
}
div#container{
width:500px;
margin: 0 auto;
text-align:left;
}
div#header{
margin-bottom: 20px;
}
div#box{
float:right;
width:150px;
margin-left:15px;
background:#E4E7F2;
text-align:center;
}
div#box p{
margin:0;
padding: 5px;
}
h1{
font-size: 120%;
margin:0;
padding: 0 5px;
background: #C3D9FF;
color: #333;
}
p{
margin:0;
padding-bottom:0.7em;
}
.rtop,.rbottom{display:block}
.rtop *,.rbottom *{display:block;height: 1px;overflow: hidden}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px;height: 2px}
.rs1{margin: 0 2px}
.rs2{margin: 0 1px}
The HTML
<div id="content">
<div id="box">
<p>No rounded corners images have been used on this page. </p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse adipiscing eleifend eros. Aliquam erat volutpat.
Quisque aliquam libero at mauris tempus accumsan.
Quisque et mauris et nunc consequat condimentum. Nam a libero.
Cras nonummy, orci sed honcus accumsan, leo nulla eleifend massa,
eget pellentesque nisi odio at velit </p>
</div>
</div>
Download the full working example here.
Or you might also want to take a look at the nifty corners site by Alessandro Fulciniti where you can find plenty more examples.