Proprietà CSS border-top-left-radius
border-top-left-radius è una proprietà CSS che definisce la forma dell'angolo in alto a sinistra di un elemento. Scopri esempi pratici qui.
La proprietà CSS border-top-left-radius arrotonda l'angolo in alto a sinistra del box del bordo di un elemento. È una delle quattro proprietà longhand — insieme a border-top-right-radius, border-bottom-left-radius e border-bottom-right-radius — in cui si espande la proprietà shorthand border-radius. Usa questa longhand quando vuoi arrotondare un solo angolo.
La proprietà border-top-left-radius è una delle proprietà CSS3.
L'angolo può essere arrotondato a cerchio o a ellisse, oppure rimanere squadrato se non viene specificato alcun valore. Se utilizzi un'immagine di sfondo o un colore, questi verranno ritagliati in base alla forma del bordo. Il comportamento di ritaglio è controllato dalla proprietà background-clip.
Come funzionano i valori
La proprietà border-top-left-radius accetta uno o due valori, ciascuno specificato come <length> o <percentage>:
- Un valore imposta sia il raggio orizzontale che quello verticale dell'angolo, producendo una curva circolare (quarto di cerchio).
- Due valori impostano i raggi di un'ellisse: il primo è il raggio orizzontale, il secondo quello verticale.
Le percentuali per il raggio orizzontale si riferiscono alla larghezza dell'elemento, mentre quelle per il raggio verticale si riferiscono alla sua altezza. I valori negativi non sono validi e la dichiarazione viene ignorata.
Attenzione: se la somma dei raggi su un lato supera la lunghezza di quel lato, il browser riduce proporzionalmente tutti i raggi degli angoli in modo che le curve non si sovrappongano mai. Quindi un valore molto grande come
border-top-left-radius: 9999pxè un modo sicuro per rendere un angolo il più arrotondato possibile rispetto alle dimensioni del box.
| Valore iniziale | 0 |
|---|---|
| Si applica a | Tutti gli elementi. Si applica anche a ::first-letter. |
| Ereditato | No |
| Animabile | Sì. Il raggio del bordo è animabile. |
| Versione | CSS3 |
| Sintassi DOM | object.style.borderTopLeftRadius = "25px"; |
Sintassi
Sintassi della proprietà CSS border-top-left-radius
border-top-left-radius: length | % | initial | inherit;Ecco un esempio di border-top-left-radius in cui viene usato un solo valore. Quando si usa un solo valore, esso imposta sia il raggio orizzontale che quello verticale dell'ellisse.
Esempio della proprietà border-top-left-radius:
Esempio della proprietà CSS border-top-left-radius con un solo valore
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 200px;
height: 40px;
background: #8ebf42;
border: 4px solid #000000;
border-top-left-radius: 25px;
}
</style>
</head>
<body>
<h2>Border-top-left-radius example.</h2>
<div></div>
</body>
</html>Risultato
Nell'esempio seguente, il primo valore imposta il raggio orizzontale e il secondo imposta il raggio verticale.
Esempio della proprietà border-top-left-radius con due valori:
Esempio della proprietà CSS border-top-left-radius con due valori
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 200px;
height: 40px;
background: #ccc;
border: 4px solid #000000;
border-top-left-radius: 50px 25px;
}
</style>
</head>
<body>
<h2>Border-top-left-radius example.</h2>
<div></div>
</body>
</html>L'esempio seguente utilizza valori percentuali. Il primo valore definisce il raggio orizzontale, il secondo definisce il raggio verticale.
Esempio della proprietà border-top-left-radius con il valore "%":
Esempio della proprietà CSS border-top-left-radius con valore percentuale
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 200px;
height: 40px;
background: #eee;
border: 4px solid #000000;
border-top-left-radius: 50% 60%;
}
</style>
</head>
<body>
<h2>Border-top-left-radius example.</h2>
<div></div>
</body>
</html>Valori
| Valore | Descrizione | Provalo |
|---|---|---|
| length | Definisce l'arrotondamento dell'angolo in alto a sinistra. | Provalo » |
| % | Definisce l'arrotondamento dell'angolo in alto a sinistra in percentuale. | Provalo » |
| initial | Imposta la proprietà al suo valore predefinito. | Provalo » |
| inherit | Eredita la proprietà dall'elemento genitore. |
Quando usare la proprietà longhand
Usa border-top-left-radius quando solo un angolo deve essere arrotondato — ad esempio un tab, una fumetto parlante o una card il cui bordo superiore si trova a filo di un'intestazione. Per arrotondare tutti gli angoli contemporaneamente, la shorthand border-radius è più concisa:
/* These two rules are equivalent for a single corner */
border-top-left-radius: 25px;
border-radius: 25px 0 0 0;Proprietà correlate
- border-radius — shorthand per tutti e quattro gli angoli.
- border-top-right-radius
- border-bottom-left-radius
- border-bottom-right-radius
- border — imposta larghezza, stile e colore del bordo.
Supporto browser
border-top-left-radius è supportata in tutti i browser moderni (Chrome, Firefox, Safari, Edge) senza prefisso vendor.