Proprietà CSS border-bottom-left-radius
CSS border-bottom-left-radius arrotonda l'angolo in basso a sinistra di un elemento. Scopri sintassi, valori ed esempi.
La proprietà border-bottom-left-radius specifica l'arrotondamento dell'angolo in basso a sinistra dell'elemento.
La proprietà border-bottom-left-radius è una delle proprietà CSS3.
Se non si specifica un valore, l'angolo rimane spigoloso. Quando viene fornito un valore, viene creato un quarto di ellisse. Se si utilizza un'immagine di sfondo o un colore, verrà ritagliata al bordo. Il processo di ritaglio è definito dal valore della proprietà background-clip.
La proprietà border-bottom-left-radius accetta due valori: lunghezza e percentuale. Quando viene fornito un solo valore, specifica sia il raggio orizzontale che quello verticale dell'ellisse. Se vengono forniti due valori, il primo imposta il raggio orizzontale e il secondo imposta il raggio verticale.
Le percentuali per il raggio orizzontale si riferiscono alla larghezza del box, quelle per il raggio verticale si riferiscono all'altezza del box. I valori negativi non sono consentiti.
Se la proprietà abbreviata border-radius viene applicata dopo border-bottom-left-radius, essa sovrascrive il valore della proprietà individuale. Per questo motivo, quando si impostano gli angoli singolarmente, è necessario dichiararli dopo qualsiasi abbreviazione border-radius. La proprietà border-bottom-left-radius è particolarmente utile quando si desidera arrotondare un solo angolo di un elemento — ad esempio, una bolla di chat, una card con un singolo angolo arrotondato o un pulsante di forma personalizzata — lasciando gli altri tre angoli spigolosi.
| Valore iniziale | 0 |
|---|---|
| Si applica a | Tutti gli elementi. Si applica anche a ::first-letter. |
| Ereditato | No. |
| Animabile | Sì. Il raggio del bordo in basso a sinistra è animabile. |
| Versione | CSS3 |
| Sintassi DOM | object.style.borderBottomLeftRadius = "35px"; |
Sintassi
Sintassi della proprietà CSS border-bottom-left-radius
border-bottom-left-radius: length| % | initial | inherit;Esempio della proprietà border-bottom-left-radius:
Esempio della proprietà CSS border-bottom-left-radius con valore px
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
height: 40px;
background: #1c87c9;
border: 4px solid #000000;
border-bottom-left-radius: 25px;
}
</style>
</head>
<body>
<h2>Border-bottom-left-radius example.</h2>
<div></div>
</body>
</html>Risultato
Esempio della proprietà border-bottom-left-radius con due valori:
Esempio della proprietà CSS border-bottom-left-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-bottom-left-radius: 30px 15px;
}
</style>
</head>
<body>
<h2>Border-bottom-left-radius example.</h2>
<div></div>
</body>
</html>Qui 30px è il raggio orizzontale e 15px è il raggio verticale, producendo un angolo ellittico (non circolare) più largo che alto.
Esempio della proprietà border-bottom-left-radius con il valore "percentuale":
Esempio della proprietà CSS border-bottom-left-radius con valore %(percentuale)
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid blue;
background-color: #666;
padding: 10px;
border-bottom-left-radius: 50%;
}
</style>
</head>
<body>
<h2>Border-bottom-left-radius example.</h2>
<div></div>
</body>
</html>Valori
| Valore | Descrizione | Prova |
|---|---|---|
| length | Specifica l'arrotondamento dell'angolo in basso a sinistra in "px". | Prova » |
| % | Specifica l'arrotondamento dell'angolo in basso a sinistra in percentuale. | Prova » |
| initial | Imposta la proprietà al suo valore predefinito. | Prova » |
| inherit | Eredita la proprietà dall'elemento padre. |
Supporto dei browser
La proprietà border-bottom-left-radius è supportata da tutti i browser moderni, inclusi Chrome, Firefox, Safari, Edge e Opera. Oggi non sono necessari prefissi vendor.
Proprietà correlate
border-bottom-left-radius controlla un singolo angolo. Per arrotondare altri angoli o tutti contemporaneamente, utilizza queste proprietà correlate:
- border-radius — abbreviazione che imposta tutti e quattro gli angoli in un'unica dichiarazione.
- border-bottom-right-radius — arrotonda l'angolo in basso a destra.
- border-top-left-radius — arrotonda l'angolo in alto a sinistra.
- border-top-right-radius — arrotonda l'angolo in alto a destra.