Esempio
Aggiungere bordi arrotondati ad un <div> elemento:
div
{
border: 2px solid;
border-radius: 25px;
}
Prova tu stesso " Definizione e utilizzo
La proprietà border-radius è una proprietà scorciatoia per settare i quattro confine - * - proprietà raggio.
Tip: Questa proprietà consente di aggiungere bordi arrotondati ad elementi!
| Valore di default: | 0 |
|---|---|
| Inherited: | no |
| animatable: | yes. Read about animatable Try it |
| Versione: | CSS3 |
| sintassi JavaScript: | object .style.borderRadius="25px" Try it |
Supporto per il browser
I numeri nella tabella indicano la prima versione del browser che supporta pienamente la proprietà.
Numeri seguiti da -webkit- o -moz- specificano la prima versione che ha lavorato con un prefisso.
| Proprietà | |||||
|---|---|---|---|---|---|
| border-radius | 5.0 4.0 -webkit- | 9.0 | 4.0 3.0 -moz- | 5.0 3.1 -webkit- | 10.5 |
CSS Sintassi
border-radius:1-4 length|%/1-4 length|%|initial|inherit;Note: I quattro valori per ogni raggio sono indicati nell'ordine in alto a sinistra, in alto a destra, in basso a destra, in basso a sinistra. Se inferiore sinistro viene omesso è lo stesso come in alto a destra. Se inferiore destro viene omesso è lo stesso come in alto a sinistra. Se superiore destro viene omesso è lo stesso come in alto a sinistra.
I valori delle proprietà
| Valore | Descrizione | Gioca |
|---|---|---|
| length | Definisce la forma degli angoli. Il valore di default è 0 | Gioca " |
| % | Definisce la forma degli angoli in% | Gioca " |
| initial | Consente di impostare questa proprietà al suo valore di default. Leggi iniziale | Gioca " |
| inherit | Eredita questo immobile dal suo elemento genitore. Leggi su erediterà |
esempio 1
border-radius:2em;
is equivalent to:
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
esempio 2
border-radius: 2em 1em 4em / 0.5em 3em;
is equivalent to:
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;
Pagine correlate
CSS3 tutorial: CSS3 Borders
Di riferimento HTML DOM: borderRadius property