Proprietà CSS border-left-color
La proprietà border-left-color definisce il colore del bordo sinistro di un elemento. Scopri tutti i valori con esempi pratici.
La proprietà CSS border-left-color imposta il colore del bordo sinistro di un elemento. Controlla solo il colore — il bordo ha bisogno anche di uno stile e di uno spessore per essere visibile.
Questa pagina tratta la sintassi di border-left-color, il motivo per cui è necessario uno stile di bordo affinché venga visualizzato, e esempi pratici per ogni tipo di valore di colore (colori con nome, hex, RGB, HSL e transparent).
Perché è necessario uno stile di bordo
Un bordo ha tre elementi: stile, spessore e colore. Per impostazione predefinita lo stile del bordo è none, il che significa che il browser non disegna alcun bordo — quindi impostare solo border-left-color non produce nulla di visibile.
Per far apparire il bordo sinistro, imposta prima uno stile con border-style o border-left-style, poi applica il colore:
.box {
border-left-style: solid; /* required, otherwise the border is invisible */
border-left-width: 4px; /* optional; defaults to medium */
border-left-color: #1c87c9;
}Se vuoi colorare anche i bordi superiore, destro e inferiore, il valore abbreviato border-color imposta tutti e quattro i lati contemporaneamente. Lo spessore è controllato separatamente con border-width o border-left-width (lo spessore predefinito è medium).
Il valore iniziale è currentColor, il che significa che, finché non si imposta un colore, il bordo assume il valore color dell'elemento stesso.
Riepilogo della proprietà
| Valore iniziale | currentColor |
|---|---|
| Si applica a | Tutti gli elementi. Si applica anche a ::first-letter. |
| Ereditata | No |
| Animabile | Sì. Il colore del bordo sinistro è animabile. |
| Versione | CSS1 |
| Sintassi DOM | object.style.borderLeft = "1px solid black"; |
Sintassi
border-left-color: color | transparent | initial | inherit;Esempi
Colorare il bordo sinistro in modo diverso dagli altri
Questo esempio disegna un bordo solido su tutti i lati con border-color, poi sovrascrive solo il lato sinistro per farlo risaltare:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 300px;
padding: 20px;
border-style: solid;
border-color: #666;
border-left-color: #1c87c9;
}
</style>
</head>
<body>
<h2>Border-left-color example</h2>
<div>Example for the border-left-color property with different left border color.</div>
</body>
</html>Risultato:
Utilizzo del valore "transparent"
Un bordo sinistro transparent è invisibile ma occupa comunque lo spazio definito dallo spessore del bordo. Questo è utile per mantenere il layout allineato o per creare effetti visibili al passaggio del mouse:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h2 {
padding: 3px;
text-align: center;
border: 15px ridge #8ebf42;
border-left-color: transparent;
}
</style>
</head>
<body>
<h2>A heading with a transparent left border</h2>
</body>
</html>Puoi impostare il colore come nome di colore, codice esadecimale, oppure come valore rgb(), rgba(), hsl() o hsla(). Gli esempi qui sotto mostrano i formati più comuni.
Valore con nome di colore
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
padding: 3px;
border-left-style: solid;
border-left-color: darkred;
}
</style>
</head>
<body>
<div>Border-left-color property with a named color value.</div>
</body>
</html>Valore esadecimale
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
padding: 3px;
border-left-style: solid;
border-left-color: #1c87c9;
}
</style>
</head>
<body>
<div>Border-left-color property with a hexadecimal value.</div>
</body>
</html>Valore RGB
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
padding: 3px;
border-left-style: solid;
border-left-color: rgb(142, 191, 66);
}
</style>
</head>
<body>
<div>Border-left-color property with a RGB value.</div>
</body>
</html>Valore HSL
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
padding: 3px;
border-left-style: solid;
border-left-color: hsl(89, 43%, 51%);
}
</style>
</head>
<body>
<div>Border-left-color property with a HSL value.</div>
</body>
</html>Valori
| Valore | Descrizione | Prova |
|---|---|---|
| color | Definisce il colore del bordo sinistro. Il colore predefinito è il colore dell'elemento corrente. Si possono usare nomi di colori, codici esadecimali, rgb(), rgba(), hsl(), hsla(). Valore obbligatorio. | Prova » |
| transparent | Applica un colore trasparente al bordo sinistro. Il bordo sinistro occuperà comunque lo spazio definito dal valore border-width. | Prova » |
| initial | Imposta la proprietà al suo valore predefinito. | Prova » |
| inherit | Eredita la proprietà dall'elemento padre. |
Proprietà correlate
- border-color — abbreviazione per tutti e quattro i colori dei bordi
- border-left-style — imposta lo stile del bordo sinistro (necessario affinché il colore sia visibile)
- border-left-width — imposta lo spessore del bordo sinistro
- border-right-color, border-top-color, border-bottom-color — colorano gli altri lati