CSS border-left
La proprietà CSS border-left imposta il bordo sinistro dell'elemento
La proprietà border-left è utilizzata per applicare un bordo solo al lato sinistro di un elemento. Puoi configurare lo spessore, lo stile e il colore del bordo sinistro, per ottenere il risultato desiderato in termini di design e layout.
Sintassi
Significato dei valori principali:
-
width: specifica lo spessore del bordo sinistro. Può essere in unità di misura come px, em, ecc.
-
style: definisce lo stile del bordo sinistro. I valori comuni sono
solid,dashed,dotted, ecc. -
color: specifica il colore del bordo sinistro. Può essere un nome di colore, un codice esadecimale, o una funzione RGB.
Esempio proprietà: border-left
Codice Esempio: border-left
.border-left-example {
width: 300px;
height: 200px;
border-left: 5px solid #50a14f; /* Bordo sinistro definito con 5px di larghezza, stile solido e colore verde */
padding: 20px;
background-color: #ff6347;
color: white;
font-size: 22px;
text-align: center;
border-radius: 10px;
}
Contenuto Esempio: border-left
Esempio di utilizzo di border-left
In questo esempio, la proprietà border-left viene utilizzata per applicare un bordo sinistro personalizzato, specificando in un’unica dichiarazione lo spessore, lo stile e il colore del bordo.
CSS e HTML per l'elemento con bordo sinistro personalizzato:
<style>
.border-left-example {
width: 300px;
height: 200px;
border-left: 15px solid #50a14f; /* Definisce il bordo sinistro con larghezza, stile e colore */
padding: 20px;
background-color: #333;
color: white;
font-size: 22px;
text-align: center;
border-radius: 10px;
}
</style>
<div class="border-left-example">
Elemento con bordo sinistro personalizzato
</div>
Leggenda Proprietà:
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.
Supporto Browser
IP: 216.73.216.118
