Prima dell’introduzione dei CSS3, per creare degli angoli arrotondati nei siti web si doveva ricorrere ad un espediente: l’utilizzo di immagini di sfondo.
In pratica, questa tecnica permette di creare sia box a larghezza fissa che box fluidi con angoli arrotondati aggiungendo un’immagine di sfondo per ogni angolo del box a cui si intende dare una curvatura.
Se ti interessa approfondire l’argomento, puoi trovare una valida guida su come dare “un tocco di rotondità” ai box di un sito web su html.it.
Sono parecchi anni che, grazie all’introduzione delle specifiche CSS3 (oramai supportate da tutti i principali browser), è possibile creare l’effetto degli angoli arrotondati senza l’utilizzo di immagini di sfondo.
L’utilizzo di questa regola è molto semplice, ecco la sintassi:
border-radius: 25px 25px 25px 25px;Come riporta l’esempio qui sopra, la proprietà border-radius può essere applicata a tutti e quattro gli angoli di un elemento HTML.
Da sinistra verso destra, i valori riportati nell’esempio si riferiscono:
- Angolo superiore sinistro
- Angolo superiore destro
- Angolo inferiore sinistro
- Angolo inferiore destro
Ma il border-radius si può applicare anche ad un singolo angolo specifico:
- Angolo superiore sinistro: border-top-left-radius
- Angolo superiore destro: border-top-right-radius
- Angolo inferiore sinistro:- border-bottom-right-radius
- Angolo inferiore destro: border-bottom-left-radius
Se si vuole assegnare lo stesso valore ai quattro angoli, si può utilizzare la notazione breve come per i valori dei padding, margini e bordi, assegnando un solo valore alla proprietà, tutti i bordi assumeranno quel valore:
border-radius: 25px;Ecco un esempio sull’utilizzo della regola CSS border-radius:
border: 5px solid #000;
border-radius: 25px;Se, invece, non viene specificato nessun bordo e viene utilizzato un colore di sfondo (background-color), sarà lo sfondo stesso ad avere gli angoli arrotondati:
background-color: #000;
border-radius: 25px;Ecco un esempio sull’utilizzo della regola CSS border-radius su un singolo angolo (inferiore sinistro, in questo caso):
border: 5px solid #000;
border-bottom-left-radius: 25px;Per approfondimenti, puoi trovate ulteriori informazioni sulla gestione degli angoli arrotondati tramite CSS sul sito W3C Shools (in inglese).
In realtà esistono altri metodi per la creazione degli angoli arrotondati, tipo l’utilizzo di Java Script specifici.
Personalmente, però, preferisco non usarli sia per una questione di rallentamento della pagina web sia per una questione di maggiore difficoltà nella personalizzazione degli stessi.