Bordi arrotondati con il CSS e div

Nell’era del web 2.0 ormai vogliamo arrotondare di tutto vero?
Ma come fare? Dobbiamo per forza utilizzare fastidiose tabelle per inserire le solite 4 immagini per fare le curvature?

Assolutamente no!

In questo esempio vedremo come rendere un box arrotondato con DIV e CSS senza immagini

• Inseriremo questo codice nella pagina HTML nel punto dove vogliamo il nostro box:<b class="rtop">
<b class="r1"></b>
<b class="r2"></b>
<b class="r3"></b>
<b class="r4"></b>
</b>
<!-- qui il contenuto effettivo -->
<div class="testo"><strong>Questo è un esempio di un box con bordi arrotondati senza immagini</strong></div>
<b class="rbottom">
<b class="r4"></b>
<b class="r3"></b>
<b class="r2"></b>
<b class="r1"></b>
</b>

• Nel nostro CSS invece:
  b.rtop, b.rbottom{display: block; background: #fff}
b.rtop b, b.rbottom b{display: block; height: 1px; overflow: hidden; background: #76C2FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px; height: 2px}
.testo{background: #76C2FA; color:#FFFFFF; font:Verdana, Arial, Helvetica, sans-serif; font-size:12px; text-align:center}

La struttura consiste nel suddividere il box in strisce al fine di ottenere la curvatura.

Guarda l’esempio

ABC, CSS, HTML, Sviluppo, Tutorial, Webdesign