Runda hörn med CSS

En ruta med runda hörn utan en gif- eller png-bild! Är det möjligt?!? Jodå, detta coola trix hittade jag på Webdesignskolans webbplats.

Lite text

Eftersom hörnorna inte blir lika mjuka som när man gör en bild med kantutjämning blir sådana här rutor snyggast i en ljus färg.

CSS:
#container_roundcorners {background: #70A299;}
.roundtop {background: #ffffff;}
.roundbottom {background: #ffffff;}
.roundcorners1{margin: 0 5px; height: 1px; overflow: hidden; background: #70A299;} .roundcorners2{margin: 0 3px; height: 2px; overflow: hidden; background: #70A299;} .roundcorners3{margin: 0 2px; height: 2px; overflow: hidden; background: #70A299;} .roundcorners4{margin: 0 1px; height: 3px; overflow: hidden; background: #70A299;} .content_roundcorners {padding: 0px 10px;}

Kod:
<div id="container_roundcorners">
<div class="roundtop">
<div class="roundcorners1"></div>
<div class="roundcorners2"></div>
<div class="roundcorners3"></div>
<div class="roundcorners4"></div>
<div class="content">
</div>
<div class="roundbottom">
<div class="roundcorners4"></div>
<div class="roundcorners3"></div>
<div class="roundcorners2"></div>
<div class="roundcorners1"></div>
</div>
</div>