CSS border-left-color
La proprietà CSS border-left-color imposta il colore del bordo sinistro
La proprietà border-left-color
consente di specificare il colore del bordo sinistro di un elemento. Può essere utilizzato insieme ad altre proprietà di bordo come border-left-width
e border-left-style
per ottenere un controllo completo sul design del bordo sinistro.
Sintassi
Significato dei valori principali:
-
color: specifica il colore del bordo sinistro. Può essere espresso in vari formati, come il nome del colore (es.
red
), il formato esadecimale (#ff6347
), RGB (rgb(255,99,71)
), ecc.
Esempio proprietà: border-left-color
Codice Esempio: border-left-color

.border-left-color-example {
width: 300px;
height: 200px;
border-left: 5px solid; /* Definisce la larghezza e lo stile del bordo */
border-left-color: #50a14f; /* Colore del bordo sinistro impostato su verde */
padding: 20px;
background-color: #ff6347;
color: white;
font-size: 22px;
text-align: center;
border-radius: 10px;
}
Contenuto Esempio: border-left-color
Esempio di utilizzo di border-left-color
In questo esempio, la proprietà border-left-color
viene utilizzata per cambiare il colore del bordo sinistro di un elemento. Affinché il bordo sia visibile, è necessario specificarne anche la larghezza e lo stile.
CSS e HTML per l'elemento con colore del bordo sinistro personalizzato:
<style>
.border-left-color-example {
width: 300px;
height: 200px;
border-left-width: 15px; /* Larghezza del bordo sinistro */
border-left-style: solid; /* Stile del bordo */
border-left-color: #ff6347; /* Colore rosso per il bordo sinistro */
padding: 20px;
background-color: #333;
color: white;
font-size: 22px;
text-align: center;
border-radius: 10px;
}
</style>
<div class="border-left-color-example">
Elemento con colore del bordo sinistro personalizzato
</div>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.