CSS border-left-style
La proprietà CSS border-left-style imposta lo stile del bordo sinistro
La proprietà border-left-style permette di definire lo stile del bordo sinistro di un elemento. Può essere utilizzata insieme alle proprietà border-left-width e border-left-color per creare bordi personalizzati con diversi effetti visivi, come tratteggiati, punteggiati, continui o tridimensionali.
Sintassi
Significato dei valori principali:
-
none: non viene applicato alcun bordo.
-
solid: un bordo continuo e solido.
-
dashed: un bordo tratteggiato.
-
dotted: un bordo a punti.
-
double: un bordo doppio con due linee distinte.
-
groove: un bordo che sembra incavato, con un effetto tridimensionale.
-
ridge: un bordo che sembra sporgere, con un effetto tridimensionale.
-
inset: un bordo che sembra incassato.
-
outset: un bordo che sembra sporgere.
Esempio proprietà: border-left-style
Codice Esempio: border-left-style
.border-left-style-example {
width: 300px;
height: 200px;
border-left: 5px solid #50a14f; /* Imposta la larghezza, il colore e lo stile del bordo sinistro */
border-left-style: dashed; /* Imposta lo stile del bordo sinistro a tratteggio */
padding: 20px;
background-color: #ff6347;
color: white;
font-size: 22px;
text-align: center;
border-radius: 10px;
}
Contenuto Esempio: border-left-style
Esempio di utilizzo di border-left-style
In questo esempio, la proprietà border-left-style viene utilizzata per applicare uno stile tratteggiato al bordo sinistro di un elemento. Per renderlo visibile, è necessario definire anche larghezza e colore.
CSS e HTML per l'elemento con bordo sinistro personalizzato:
<style>
.border-left-style-example {
width: 300px;
height: 200px;
border-left-width: 5px; /* Larghezza del bordo sinistro */
border-left-style: dashed; /* Stile tratteggiato per il bordo sinistro */
border-left-color: #000; /* Colore nero del bordo sinistro */
padding: 20px;
background-color: #ff6347;
color: white;
font-size: 22px;
text-align: center;
border-radius: 0px;
}
</style>
<div class="border-left-style-example">
Elemento con 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.
Supporto Browser
IP: 216.73.216.118
