Proprietà CSS border-radius
Esempio
Aggiungi angoli arrotondati a due elementi <div>:
#example1 {
border: 2px solid red;
border-radius: 25px;
}
#example2 {
border: 2px solid red;
border-radius: 50px
20px;
}
Altri esempi "Provalo da solo" di seguito.
Definizione e utilizzo
La border-radiusproprietà definisce il raggio degli angoli dell'elemento.
Suggerimento: questa proprietà ti consente di aggiungere angoli arrotondati agli elementi!
Questa proprietà può avere da uno a quattro valori. Ecco le regole:
Quattro valori: raggio di confine: 15px 50px 30px 5px; (il primo valore si applica all'angolo in alto a sinistra, il secondo valore si applica all'angolo in alto a destra, il terzo valore si applica all'angolo in basso a destra e il quarto valore si applica all'angolo in basso a sinistra):
Tre valori: raggio di confine: 15px 50px 30px; (il primo valore si applica all'angolo in alto a sinistra, il secondo valore si applica agli angoli in alto a destra e in basso a sinistra e il terzo valore si applica all'angolo in basso a destra):
Due valori: raggio di confine: 15px 50px; (il primo valore si applica agli angoli in alto a sinistra e in basso a destra e il secondo valore si applica agli angoli in alto a destra e in basso a sinistra):
Un valore - raggio di confine: 15px; (il valore si applica a tutti e quattro gli angoli, che sono arrotondati allo stesso modo:
| Valore di default: | 0 |
|---|---|
| Ereditato: | no |
| Animabile: | sì. Leggi su animabile |
| Versione: | CSS3 |
| sintassi JavaScript: | oggetto .style.borderRadius="25px" |
Supporto browser
I numeri nella tabella specificano la prima versione del browser che supporta completamente la proprietà.
I numeri seguiti da -webkit- o -moz- specificano la prima versione che ha funzionato con un prefisso.
| Property | |||||
|---|---|---|---|---|---|
| border-radius | 5.0 4.0 -webkit- |
9.0 | 4.0 3.0 -moz- |
5.0 3.1 -webkit- |
10.5 |
Sintassi CSS
border-radius: 1-4 length|% / 1-4 length|%|initial|inherit;
Nota: i quattro valori per ciascun raggio sono indicati nell'ordine in alto a sinistra, in alto a destra, in basso a destra, in basso a sinistra. Se in basso a sinistra viene omesso, è uguale a in alto a destra. Se in basso a destra viene omesso, è uguale a in alto a sinistra. Se in alto a destra viene omesso, è uguale a in alto a sinistra.
Valori di proprietà
| Value | Description | Play it |
|---|---|---|
| length | Defines the shape of the corners. Default value is 0. Read about length units | |
| % | Defines the shape of the corners in % | |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
Altri esempi
Esempio
Imposta gli angoli arrotondati per un elemento con un colore di sfondo:
#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
Esempio
Imposta gli angoli arrotondati per un elemento con un bordo:
#rcorners2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
Esempio
Imposta gli angoli arrotondati per un elemento con un'immagine di sfondo:
#rcorners3 {
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
Esempio
Nota anche questo:
#example1 {
border-radius: 2em / 5em;
}
/* is equivalent to:
border-top-left-radius: 2em 5em;
border-top-right-radius: 2em 5em;
border-bottom-right-radius: 2em 5em;
border-bottom-left-radius: 2em 5em; */
#example2 {
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
Tutorial CSS: CSS Angoli Arrotondati
Riferimento HTML DOM: proprietà borderRadius