Angoli arrotondati CSS
Angoli arrotondati CSS
Con la proprietà CSS border-radius, puoi dare a qualsiasi elemento "angoli arrotondati".
Proprietà CSS border-radius
La proprietà CSS
border-radiusdefinisce il raggio degli angoli di un elemento.
Suggerimento: questa proprietà ti consente di aggiungere angoli arrotondati agli elementi!
Ecco tre esempi:
1. Angoli arrotondati per un elemento con un colore di sfondo specificato:
Angoli arrotondati!
2. Angoli arrotondati per un elemento con bordo:
Angoli arrotondati!
3. Angoli arrotondati per un elemento con un'immagine di sfondo:
Angoli arrotondati!
Ecco il codice:
Esempio
#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat:
repeat;
padding: 20px;
width:
200px;
height: 150px;
}
Suggerimento: la border-radiusproprietà è in realtà una proprietà abbreviata per le
proprietà border-top-left-radius, border-top-right-radiuse .border-bottom-right-radiusborder-bottom-left-radius
Raggio bordo CSS - Specifica ogni angolo
La border-radiusproprietà 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:
Ecco il codice:
Esempio
#rcorners1 {
border-radius: 15px 50px 30px 5px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 15px 50px 30px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 15px 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners4 {
border-radius: 15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
Puoi anche creare angoli ellittici:
Esempio
#rcorners1 {
border-radius: 50px / 15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 15px / 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 50%;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
Proprietà degli angoli arrotondati CSS
| Property | Description |
|---|---|
| border-radius | A shorthand property for setting all the four border-*-*-radius properties |
| border-top-left-radius | Defines the shape of the border of the top-left corner |
| border-top-right-radius | Defines the shape of the border of the top-right corner |
| border-bottom-right-radius | Defines the shape of the border of the bottom-right corner |
| border-bottom-left-radius | Defines the shape of the border of the bottom-left corner |