In un Web ideale tutti gli utenti navigherebbero con le ultime versioni dei browser più standard-compliant del momento e quindi per realizzare l'effetto degli angoli arrotondati con i CSS utilizzeremmo la proprietà CSS3 border-radius. Purtroppo non viviamo in un Web ideale. Ecco perchè conoscere alcune tecniche retrocompatibili si rivela necessario.
Metodo fisso
Il metodo fisso si applica ai box dalle dimensioni fisse. Sostanzialmente è necessario creare due immagini come quelle mostrate di seguito.
Tali immagini andranno applicate rispettivamente all'ultimo elemento all'interno del contenitore e al contenitore stesso. Il nostro CSS sarà:
#box {
width: 200px;
margin: 0;
padding: 0;
background: #def url("angoli2.gif") no-repeat bottom left;
color: #000;
font-size: 80%;
}
#box p {
margin: 0;
padding: 0.5em;
background: transparent url("angoli1.gif") no-repeat top left;
}
La prima immagine mostrata viene applicata al paragrafo all'interno del box, la seconda al contenitore. Affinchè questa tecnica funzioni è necessario che gli elementi all'interno del box non abbiano margini impostati. In caso contrario verranno visualizzati degli spazi vuoti. Da notare i valori della proprietà 'background-position': 'bottom left' per il contenitore e 'top left' per il paragrafo.
Metodo fluido
Il metodo fluido si applica ai box dalle dimensioni fluide. Sostanzialmente è necessario creare quattro immagini come quelle mostrate di seguito.
In questo caso si rende necessario modificare la marcatura come segue:
<div id="box"> <div class="sup-dx"><div class="inf-dx"><div class="inf-sx"> <p>...</p> </div></div></div> </div>
Le immagini di sfondo andranno applicate come segue:
#box {
width: 50%;
margin: 0;
padding: 0;
background: #def url("superiore-sx.gif") no-repeat top left;
color: #000;
font-size: 80%;
}
.sup-dx {
background: transparent url("superiore-dx.gif") no-repeat top right;
}
.inf-dx {
background: transparent url("inferiore-dx.gif") no-repeat bottom right;
}
.inf-sx {
background: transparent url("inferiore-sx.gif") no-repeat bottom left;
}
#box p {margin: 0; padding: 1em;}
Il contenitore principale ha come immagine di sfondo l'angolo superiore sinistro, il primo elemento aggiuntivo l'angolo superiore destro, il secondo elemento aggiuntivo l'angolo inferiore destro e il terzo elemento aggiuntivo l'angolo inferiore sinistro. Si notino i valori della proprietà 'background-position' per i quattro elementi, rispettivamente 'top left', 'top right', 'bottom right' e 'bottom left'. Ancora una volta gli elementi all'interno del box non devono avere margini impostati. Si usi invece il padding per distanziare il testo.