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.
7 Commenti
Stavo cercando qualcosa del genere.
Questo codice rispetto ad altri che ho visto è più breve.
Lo proverò.
grazie mille come sempre julius ti ho linkato questo post
http://elektrojoke.blogspot.com/2009/04/bordi-e-angoli-arrotondati-con-i-css.html
Ciao Jiulius,
grazie per il prezioso codice ma avrei una domanda, come si fa a modificarne l’altezza e la lunghezza? Il box prende automaticamente tutta la larghezza della pagina….
Caro Giulio, scusami ma forse non hai chiara la differenza fra bordo e angolo: a me sembra che di arrotondato ci siano solo gli angoli . Io sto cercando qualcosa che mi arrotondo il BORDO di qualche px facendo risultare l’ immagine sopraelevata.
@stefano: ti basta associare una classe da CSS e indicare la larghezza del box.
@ Marco-Giuliani: si in effetti di arrotondando c’è solo gli angoli, il bordo è di conseguenza arrotondato :-)
La tua richiesta però non mi è chiara, forse intendi dire un pò di ombra sul bordo per simulare un box in primo piano rispetto agli altri?
simpatica come idea ma purtroppo non è trasparente quindi l’effetto di curve non è valido se vogliamo metterci uno sfondo nel
solo uno sfondo bianco va bene
Ciao, volevo chiederti come faccio a rendere il fondo bianco e il bordo del box nero largo 1px. Grazie mille