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

Author

Strategy Director @AQuest ~ Docente Master @NinjAcademy

7 Commenti

  1. 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….

  2. Marco-Giuliani

    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.

  3. @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?

  4. 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

  5. Ciao, volevo chiederti come faccio a rendere il fondo bianco e il bordo del box nero largo 1px. Grazie mille

Commenti