HTML – Angoli arrotondati con CSS

Una delle caratteristiche considerate proprie del web 2.0 sono gli elementi della pagina con gli angoli arrotondati. Quello che fino a qualche anno fa era possibile solo tramite immagini o altri “trucchi”, da un po’ di tempo è possibile per mezzo delle nuove specifiche del CSS3. Anche se il CSS3 non è ancora stato approvato ufficialmente (è in attesa da alcuni anni), ormai i maggiori browser, escluso Internet Explorer si sono adeguati da tempo, e sono in grado di mostrare alcuni elementi del HTML con gli angoli arrotondati grazie alla proprietà border-radius.

Proprio perché le specifiche CSS3 non sono ancora ufficiali, i browser hanno implementato la proprietà border-radius in modo diverso: safari e chrome utilizzano la proprietà -webkit-border-radius, firefox utilizza -moz-border-radius. Per rendere la nostra pagina più compatibile possibile è necessario utilizzarle tutte e tre. Esempio di regola css:

Sono un elemento con bordo blu e angoli arrotondati

La proprietà border-radius consente due valori: il primo per il raggio orizontale, il secondo per il raggio verticale. Esempio di regola css:

Sono un elemento con bordo blu e angoli arrotondati di raggi diversi

Nota: Firefox non segue le specifiche e applica il primo valore per gli angoli superiore-sinistro e inferiore-destro e il secondo valore per gli angoli inferiore-sinistro e superiore-destro.

La proprietà border radius può essere applicata ad un angolo speficico:

  • border-top-right-radius per l’angolo superiore destro
  • border-bottom-right-radius per l’angolo inferiore destro
  • border-top-left-radius per l’angolo superiore sinistro
  • border-bottom-left-radius per l’angolo inferiore sinistro

Esempio di regola css:

Sono un elemento con l’angolo superiore sinistro arrotondato

Se usiamo uno colore di sfondo (background-color) senza specificare uno bordo, lo sfondo dell’elemento avrà lui-stesso angoli arrotondati. Esempio di regola css:

Sono un elemento con uno sfondo blu chiaro e angoli arrotondati

Tags: ,

About the Author

2 Enlightened Replies

Trackback  •  Comments RSS

  1. Caribe ha detto:

    Negli esempi dell’articolo devi usare anche la proprietà standard border-radius perché Opera supporta solo quella. E si va a vedere anche Konqueror.

Post a Reply

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

Top