Rounded Corners with CSS

Alright, here we go. Couple of ways you can achieve this. But before that I have to give the credit to many of those who made it possible for the second method mentioned below so that I dont reinvent the wheel.
___________________________________________
FUTURE: CSS3:

An exciting wave is going to come to eliminate the present and past. CSS3 in beta stage is going to have a new class border-radius. Isnt it awesome?

Syntax: border-radius: <len><len>
the are the lengiths left->Right and right->left.

for individual corners:
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
border-top-left-radius

Unfortunatly since it is in beta phase we cannot use it. however, mozilla has a work around.

use the below and you will see it flying

blockquote{
-moz-border-radius: 2em;
border-radius: 2em;
}

___________________________________________
PAST AND PRESENT
___________________________________________
Method I. (Globally followed) : WITH IMAGES
Create 4 curved images (for 4 corners of table / cell / div) and use the below CSS format code and use the classes to set it to your table / cell / div.

CSS:

.topright {background: url(top_right.gif) 100% 0 no-repeat; padding:10px;}
.bottomright {background: url(bottom_right.gif) 100% 100% no-repeat;}
.topleft {background: url(top_left.gif) 0 0 no-repeat;}
.bottomleft {background: url(bottom_left.gif) 0 100% no-repeat;}

and in your page:

<div class="bottomright">
<div class="topleft">
<div class="bottomleft">
<div class="topright">
// YOUR CODE GOES HERE
</div>
</div>
</div>
</div>

________________________________________________
Method II. (Browser dependancy) : WITHOUT IMAGES

CSS:

div.rounded {
width: 9em;
background-color: #E6E6E6;
margin: 3px;
}
div.top-left-corner, div.bottom-left-corner,
div.top-right-corner, div.bottom-right-corner
{position:absolute; width:20px; height:20px;
background-color:#FFF; overflow:hidden;}
div.top-left-inside, div.bottom-left-inside,
div.top-right-inside, div.bottom-right-inside
{position:relative; font-size:150px; font-family:arial;
color:#E6E6E6; line-height: 40px;}
div.top-left-corner { top:0px; left:0px; }
div.bottom-left-corner {bottom:0px; left:0px;}
div.top-right-corner {top:0px; right:0px;}
div.bottom-right-corner {bottom: 0px; right:0px;}
div.top-left-inside {left:-8px;}
div.bottom-left-inside {left:-8px; top:-17px;}
div.top-right-inside {left:-25px;}
div.bottom-right-inside {left:-25px; top:-17px;}
div.box-contents {
position: relative; padding: 8px; color:#000;
}

<div class="rounded">
<div class="top-left-corner">
<div class="top-left-inside">
</div>
</div>
<div class="bottom-left-corner">
<div class="bottom-left-inside">
</div>
</div>
<div class="top-right-corner">
<div class="top-right-inside">
</div>
</div>
<div class="bottom-right-corner">
<div class="bottom-right-inside">
</div>
</div>
<div class="box-contents">
// YOUR CONTENT GOES HERE
</div>
</div>