Proprietà CSS border-bottom-right-radius
CSS border-bottom-right-radius arrotonda l'angolo in basso a destra di un elemento. Sintassi, valori ed esempi pratici.
La proprietà CSS border-bottom-right-radius arrotonda solo l'angolo in basso a destra del box del bordo di un elemento. È una delle quattro proprietà longhand — insieme a border-top-left-radius, border-top-right-radius e border-bottom-left-radius — che la proprietà shorthand border-radius raggruppa. Usa la longhand quando vuoi arrotondare un singolo angolo lasciando gli altri spigolosi. Fa parte delle proprietà CSS3.
Come funziona
L'angolo viene disegnato come un quarto di ellisse definita da un raggio orizzontale e un raggio verticale:
- Un valore imposta entrambi i raggi, producendo un angolo perfettamente circolare (simmetrico).
- Due valori impostano prima il raggio orizzontale e poi il raggio verticale, producendo un angolo ellittico.
- Le percentuali vengono calcolate rispetto al box dell'elemento: il raggio orizzontale è una percentuale della larghezza, il raggio verticale una percentuale dell'altezza.
Se non viene impostato alcun valore, il raggio è 0, lasciando un angolo quadrato. Un colore di sfondo o un'immagine viene ritagliata in base all'angolo arrotondato; puoi modificare il punto di ritaglio con la proprietà background-clip.
Alcuni aspetti da tenere a mente:
- I valori negativi non sono validi — l'angolo rimane a
0. - La proprietà è animabile, quindi gli angoli possono trasformarsi fluidamente su
:hovero tramite keyframe. - Il supporto dei browser è universale nei browser moderni e in tutte le versioni di Internet Explorer a partire da IE9.
border-bottom-right-radius è una longhand. Se la shorthand border-radius viene dichiarata dopo di essa nella stessa regola, la shorthand reimposta tutti e quattro gli angoli e sovrascrive questo valore. Ordina le dichiarazioni di conseguenza.
| Valore iniziale | 0 |
|---|---|
| Si applica a | Tutti gli elementi. Si applica anche a ::first-letter. |
| Ereditato | No. |
| Animabile | Sì. Il raggio dell'angolo in basso a destra del bordo è animabile. |
| Versione | CSS3 |
| Sintassi DOM | object.style.borderBottomRightRadius = "15px"; |
Sintassi
Proprietà CSS border-bottom-right-radius
border-bottom-right-radius: length | % | initial | inherit;Esempio della proprietà border-bottom-right-radius:
Esempio della proprietà CSS border-bottom-right-radius con un valore
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
height: 40px;
background: #1c87c9;
border: 4px solid #000000;
border-bottom-right-radius: 35px;
}
</style>
</head>
<body>
<h2>Border-bottom-right-radius example.</h2>
<div></div>
</body>
</html>Risultato
Esempio della proprietà border-bottom-right-radius con due valori:
Esempio della proprietà CSS border-bottom-right-radius con due valori
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
height: 40px;
background: #eee;
border: 4px solid #666;
border-bottom-right-radius: 30px 15px;
}
</style>
</head>
<body>
<h2>Border-bottom-right-radius example.</h2>
<div></div>
</body>
</html>Esempio della proprietà border-bottom-right-radius con il valore "percentuale":
Esempio della proprietà CSS border-bottom-right-radius con un valore percentuale
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
height: 40px;
background: #8ebf42;
border: 4px solid #000000;
border-bottom-right-radius: 30% 50%;
}
</style>
</head>
<body>
<h2>Border-bottom-right-radius example.</h2>
<div></div>
</body>
</html>Valori
| Valore | Descrizione | Prova |
|---|---|---|
| length | Specifica la forma dell'angolo in basso a destra tramite "px". | Prova » |
| % | Specifica la forma dell'angolo in basso a destra in percentuale. | Prova » |
| initial | Imposta la proprietà al suo valore predefinito. | Prova » |
| inherit | Eredita la proprietà dall'elemento padre. |
Proprietà correlate
- border-radius — la shorthand che imposta tutti e quattro gli angoli contemporaneamente.
- border-top-left-radius, border-top-right-radius, border-bottom-left-radius — le altre tre longhand degli angoli.
- background-clip — controlla come lo sfondo viene ritagliato in corrispondenza degli angoli arrotondati.