Klicka här för att se följande exempel

HTML:

<div class="round"><div><div><div>
<p>Innehållet skrivs här...</p>
</div></div></div></div>

CSS:

.round {
   background:url(images/corners1/lt.gif) 0 0 no-repeat;
   background-color:#003399;
}
.round div {
   background:url(images/corners1/rt.gif) 100% 0 no-repeat;
}
.round div div {
   background:url(images/corners1/rb.gif) 100% 100% no-repeat;
}
.round div div div {
   background:url(images/corners1/lb.gif) 0 100% no-repeat;
   padding: 30px;
}

Bilder:

lt.gif	rt.gif	rb.gif	lb.gif

Boxen består av fyra divisioner inuti varandra med en bild i vardera hörn.

• Den yttersta (första) div-taggen bestämmer boxens bredd, anger boxens bakgrundsfärg och visar bilden för det övre vänstra hörnet.
• Den näst yttersta visar bilden med det övre högra hörnet.
• Nästföljande div placerar bilden i det nedre högra hörnet.
• Den sista div-taggen visar bilden i nedre vänstra hörnet och anger boxens padding.

För att undvika problem är det viktigt att boxens bredd och eventuell höjd enbart anges i den första div-taggen och att eventuell padding anges i den sista.