Proprietà CSS border-top-right-radius
La proprietà CSS border-top-right-radius arrotonda l'angolo in alto a destra di un elemento. Sintassi, uso con uno o due valori e percentuali.
La proprietà CSS border-top-right-radius arrotonda l'angolo in alto a destra del box del bordo di un elemento. È una delle quattro proprietà longhand in cui si espande la shorthand border-radius — le altre sono border-top-left-radius, border-bottom-right-radius e border-bottom-left-radius. Usa questa proprietà longhand quando vuoi arrotondare un singolo angolo senza influenzare gli altri tre.
Questa proprietà fa parte delle proprietà CSS3.
La forma dell'arrotondamento dipende dai valori forniti:
- Angolo quadrato — quando il raggio è
0(il valore predefinito), l'angolo rimane netto. - Angolo circolare — quando si fornisce un singolo valore (o due valori uguali), l'angolo è un quarto di cerchio di quel raggio.
- Angolo ellittico — quando si forniscono due valori diversi, l'angolo è un quarto di ellisse.
Se l'elemento ha un'immagine di sfondo o un colore di sfondo, viene ritagliato in corrispondenza del bordo arrotondato. L'entità del ritaglio è controllata dalla proprietà background-clip.
La proprietà accetta i valori length, percentage, initial e inherit, e specifica i raggi orizzontale e verticale dell'angolo in alto a destra arrotondato. Quando viene fornito un solo valore, imposta sia il raggio orizzontale che quello verticale (angolo circolare). Con due valori, il primo imposta il raggio orizzontale e il secondo imposta il raggio verticale (angolo ellittico). Le percentuali per il raggio orizzontale sono relative alla larghezza del box, quelle per il raggio verticale sono relative alla sua altezza. I valori negativi non sono consentiti.
| Valore iniziale | 0 |
|---|---|
| Si applica a | Tutti gli elementi. Si applica anche a ::first-letter. |
| Ereditato | No. |
| Animabile | Sì. Il bordo in alto a destra è animabile. |
| Versione | CSS3 |
| Sintassi DOM | object.style.borderTopRightRadius = "25px"; |
Sintassi
Sintassi della proprietà CSS border-top-right-radius
border-top-right-radius: length | % | initial | inherit;Proviamo un esempio in cui viene usato un solo valore. Definisce sia il raggio orizzontale che quello verticale dell'ellisse.
Esempio della proprietà border-top-right-radius:
Esempio della proprietà CSS border-top-right-radius con un solo valore
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
height: 40px;
background: #666;
border: 4px solid #000000;
border-top-right-radius: 35px;
}
</style>
</head>
<body>
<h2>Border-top-right-radius example.</h2>
<div></div>
</body>
</html>Risultato
Quando vengono forniti due valori, il primo definisce il raggio orizzontale e il secondo definisce il raggio verticale, producendo un angolo ellittico.
Esempio della proprietà border-top-right-radius con due valori:
Esempio della proprietà CSS border-top-right-radius con due valori
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
height: 40px;
background: #666;
border: 4px solid #000000;
border-top-right-radius: 35px 10px;
}
</style>
</head>
<body>
<h2>Border-top-right-radius example.</h2>
<div></div>
</body>
</html>Esempio della proprietà border-top-right-radius con percentuali:
Esempio della proprietà CSS border-top-right-radius con valori in % (percentuali)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
height: 40px;
background: #1c87c9;
border: 4px solid #000000;
border-top-right-radius: 60% 30%;
}
</style>
</head>
<body>
<h2>Border-top-right-radius example.</h2>
<div></div>
</body>
</html>Quando utilizzarla
Usa border-top-right-radius (invece della shorthand border-radius) quando solo l'angolo in alto a destra deve essere arrotondato — ad esempio, l'angolo principale di una scheda, una bolla di chat o una card i cui altri angoli devono rimanere squadrati. Per arrotondare tutti gli angoli contemporaneamente, la shorthand border-radius è più concisa:
/* Round only the top-right corner */
border-top-right-radius: 12px;
/* Round all four corners at once */
border-radius: 12px;Valori
La tabella seguente elenca i valori accettati.
| Valore | Descrizione | Provalo |
|---|---|---|
| length | Definisce la forma arrotondata dell'angolo in alto a destra. | Provalo » |
| % | Definisce la forma arrotondata dell'angolo in alto a destra in %. | Provalo » |
| initial | Imposta la proprietà al suo valore predefinito. | Provalo » |
| inherit | Eredita la proprietà dall'elemento genitore. |