CSS: bordi arrotondati retrocompatibili

Come ottenere l'effetto dei bordi arrotondati con i CSS anche in quei browser che non supportano la proprietà CSS3 border-radius.

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à:

(Vedi esempio)

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:

Le immagini di sfondo andranno applicate come segue:

(Vedi esempio)

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.