CSS border-block-end-style
La proprietà CSS3 border-block-end-style imposta lo stile del bordo alla fine del blocco
La proprietà border-block-end-style definisce lo stile del bordo logico alla fine del blocco, ossia tipicamente il bordo inferiore. Essendo una proprietà logica, si adatta automaticamente alla direzione del contenuto, garantendo compatibilità con layout multilingua e scritture alternative (verticali o RTL).
Sintassi
Significato dei valori principali:
none: Nessun bordo viene visualizzato.
solid: Bordo a linea continua.
dashed: Bordo tratteggiato.
dotted: Bordo punteggiato.
double: Due linee parallele.
groove / ridge / inset / outset: Effetti 3D sul bordo (visibili solo con colore e larghezza adeguati).
Esempio proprietà: border-block-end-style
Codice Esempio: border-block-end-style
.border-block-end-style-example {
border-block-end-width: 4px; /* Larghezza del bordo */
border-block-end-style: dashed; /* Stile tratteggiato */
border-block-end-color: #d62828; /* Colore rosso scuro */
padding: 20px;
background-color: #ffe8d6;
font-size: 20px;
text-align: center;
border-radius: 6px;
}
Contenuto Esempio: border-block-end-style
Esempio di utilizzo di border-block-end-style
In questo esempio, border-block-end-style viene usata per definire uno stile tratteggiato per il bordo inferiore logico:
CSS e HTML per l'elemento con border-block-end-style:
<style>
.border-block-end-style-example {
border-block-end-width: 4px;
border-block-end-style: dashed;
border-block-end-color: #d62828;
padding: 20px;
background-color: #ffe8d6;
font-size: 20px;
text-align: center;
border-radius: 6px;
}
</style>
<div class="border-block-end-style-example">
Bordo logico con stile tratteggiato
</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.108
