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

Sono un Creative Strategist con più di 10 anni di esperienza in strategie digitali. Il mio ruolo di Stratega consiste nell’ideare e sviluppare concept creativi per progetti multicanale, individuando le attivazioni e dinamiche di Marketing da applicare attraverso un approccio strategico.

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