Boxen mit abgerundeten Ecken

Prinzipiell geht das so: Sie verschachteln einfach so viele div-Container ineinander, dass derselbe Effekt erzielt wird. Nach oben und unten muss die Breite immer mehr abnehmen, damit der Effekt mit den abgerundeten Kanten erzielt wird. Eine Beispiel-Stildefinition dafür kann so aussehen:

 <style type="text/css">
.round{
display:block;}
.round *{
display:block;
height:1px;
overflow:hidden;
background:#0a67e6;
}
.round1{
border-right:1px solid #95bdf4;
padding-right:1px;
margin-right:3px;
border-left:1px solid #95bdf4;
padding-left:1px;
margin-left:3px;
background:#478dec;
}
.round2{
border-right:1px solid #e6effc;
border-left:1px solid #e6effc;
padding:0px 1px;
background:#3883ea;
margin:0px 1px;
}
.round3{
border-right:1px solid #3883ea;
border-left:1px solid #3883ea;
margin:0px 1px;
}
.round4{
border-right:1px solid #95bdf4;
border-left:1px solid #95bdf4;
}
.round5{
border-right:1px solid #478dec;
border-left:1px solid #478dec;
}
.round_content{
padding:0px 5px;
background:#0a67e6;
}
</style>

Sie können sich übrigens das Eingeben des Codes auch ersparen. Auf der Seite www.spiffycorners.com gibt es einen Generator dafür. Sie müssen nur einen Klassennamen, eine Vorder- und eine Hintergrundfarbe definieren, und Sie erhalten per Klick den fertigen Code, den Sie dann per Cut and Paste in Ihre Site einbauen können.