'Boxen' mit runden Ecken. Wie am besten erstellen?

[Froschpopo]

Hallo Sascha,

komfortable und ohne Images gehts so:
http://www.html.it/articoli/niftycube/index.html

oder so:

<div class="box">
  <b class="top">
    <b class="r1"></b><b class="r2"></b>
    <b class="r3"></b><b class="r4"></b>
  </b>
  <h1>Runde Ecken</h1>
  <p>Runde Ecken ohne Bilder.</p>
  <b class="bottom">
    <b class="r4"></b><b class="r3"></b>
    <b class="r2"></b><b class="r1"></b>
  </b>
</div>
CSS:

.box { width: 15em; background: #9BD1FA;}
.box h1, .box p {margin: 0 10px;}
.box h1 {font-size:150%; color:#ffffff; }
.box .top, .box .bottom{display:block;background: #dddddd;}
.box .top b, .box .bottom b
{
  display:block;height: 1px; overflow: hidden; background: #9BD1FA;
}
.box .r1{margin: 0 5px;}
.box .r2{margin: 0 3px;}
.box .r3{margin: 0 2px;}
.box .top .r4, .box .bottom .r4{margin: 0 1px;height: 2px;}

Oooooder mit Vererbungen auch so:

<li class="round_corners">
  <div>
    <div>
      <div>
        Inhalt des Elements
      </div>
    </div>
  </div>
</li>

CSS:
.round_corners {
  background: url(pfad/top_left.jpg) top left no-repeat;
}

.round_corners div {
  background: url(pfad/top_right.jpg) top right no-repeat;
}

.round_corners div div {
  background: url(pfad/bottom_left.jpg) bottom left no-repeat;
}

.round_corners div div div  {
  background: url(pfad/top_right.jpg) bottom right no-repeat;
}