Il Blog di INSTANT WEBSITES

La proprietà CSS3 border-radius

Tra le novità introdotte con i CSS3, vale a dire la nuova versione dei Cascading Style Sheet, merita una menzione la proprietà border-radius che consente di arrotondare i bordi di un box in base ad un determinato raggio.

Fino ad oggi, per ottenere l’effetto di arrotondamento era necessario creare i bordi tramite elementi grafici (tipicamente, gif trasparenti) ed applicare questi ultimi al box interessato come sfondo e/o come contenuto.
Un’ulteriore complicazione era data dal fatto che diventava spesso necessario creare dei div ad hoc proprio per applicare tali sfondi, rendendo più complesso – e semanticamente meno corretto – il mark-up.

Si trattava, in altre parole, di una procedura noiosa e contrastante con l’obiettivo di semplicità e stretta rilevanza semantica del codice ma inevitabile per ottenere l’effetto.

Tutte queste complicazioni sono oggi venute meno grazie alla proprietà border-radius che ha la seguente struttura:

#box {

border-radius: 10px;
}

dove il valore 10px si riferisce al raggio di ciascun angolo, nel caso specifico uguale su tutti e quattro gli angoli.

Possono essere definiti fino a quattro valori diversi per i rispettivi angoli, secondo il consueto ordine top-right-bottom-left come segue:

#box {

border-radius: 10px 15px 20px 25px;
}

equivalente a:

#box {

border-top-left-radius: 10px;
border-top-right-radius: 15px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 25px;
}

Tornando all’ipotesi in cui il raggio sia uguale in tutti e quattro gli angoli, può essere opportuno in questa fase di “transizione” esprimere la dichiarazione seguendo le rispettive sintassi specifiche per i diversi browser:

#box {

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

Un paio di esempio sono pubblicati in questa pagina.

Su Internet sono disponibili dei tools online per generare il codice CSS relativo a questa proprietà, ad esempio: http://border-radius.com per citarne giusto uno.

Il limite nell’utilizzo di questa proprietà è costituito, così come per altre introdotte con i CSS3, dal mancato supporto da parte dei browser meno recenti.
Ad esempio, Internet Explorer supporta la proprietà border-radius a partire dalla versione 9.
Questo significa che quando la pagina viene visualizzata con uno di questi browser, gli angoli non appariranno arrotondati bensì a 90°.
Sono stati messi a punto degli script che rendono questa ed alcune altre proprietà supportate da IE8 e – in alcuni casi – precedenti, sui quali non è opportuno soffermarsi in questo articolo; è comunque ragionevole affermare che la mancata visualizzazione dei bordi arrotondati non compromette la fruibilità del sito ed è quindi accettabile, anche nell’ottica di motivare gli utenti ad aggiornare la versione del proprio programma di navigazione – o meglio ancora a cambiare da IE a Firefox o Chrome.

BIBLIOGRAFIA: “CSS Guida completa” – terza edizione. Gianluca Troiani, APOGEO Editore, 2011 (pagg.80-83)

2 risposte a La proprietà CSS3 border-radius

  • Avatar

    Negli esempi indicati, gli angoli vengono arrotondati in modo circolare.

    Esiste la possibilità di allungarli?

  • Avatar

    Sì, è possibile esprimere due raggi differenti in orizzontale ed in verticale, sempre in px, separati da uno slash vale a dire:

    border-radius: 30px / 10px;

    dove 30px è il raggio orizzontale e 10px è il raggio verticale.

    Nel caso in cui gli angoli abbiano raggi diversi tra loro, le relative dichiarazioni saranno le seguenti:

    border-top-left-radius: 30px 10px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px 5px;
    border-bottom-left-radius: 40px 10px;

    Ho pubblicato i relativi esempi in questa pagina.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Sistema di comunicazione unificata VOIP
Sistema di comunicazione unificata VOIP per studi professionali, piccole, medie e grandi aziende
Categorie
Archivi
Statistiche
  • 22648Totale visitatori:
  • 50376Totale letture:
  • 5 Giugno 2008Da: