CSS border-block-end
La proprietà CSS3 border-block-end imposta il bordo alla fine del blocco logico
La proprietà border-block-end è una scorciatoia per definire larghezza, stile e colore del bordo alla fine del blocco (in genere il bordo inferiore). È particolarmente utile per gestire layout multilingua e adattabili alla direzione del testo (ad esempio da sinistra a destra o viceversa).
Sintassi
Significato dei valori principali:
-
width: lo spessore del bordo alla fine del blocco (es.
2px,medium,thin). -
style: lo stile del bordo, ad esempio
solid,dashed,dotted, ecc. -
color: il colore del bordo, espresso in formato esadecimale, RGB, HSL o come parola chiave (
black,#ff0000, ecc.).
Esempio proprietà: border-block-end
Codice Esempio: border-block-end
.border-block-end-example {
border-block-end: 6px dashed #ff6f61; /* Bordo inferiore logico */
padding: 20px;
background-color: #fdf0d5;
font-size: 20px;
text-align: center;
border-radius: 8px;
}
Contenuto Esempio: border-block-end
Esempio di utilizzo di border-block-end
In questo esempio, la proprietà border-block-end viene usata per impostare un bordo soltanto alla fine del blocco (in genere in basso):
CSS e HTML per l'elemento con border-block-end:
<style>
.border-block-end-example {
border-block-end: 6px dashed #ff6f61;
padding: 20px;
background-color: #fdf0d5;
font-size: 20px;
text-align: center;
border-radius: 8px;
}
</style>
<div class="border-block-end-example">
Bordo solo alla fine del blocco
</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
