CSS border-block
La proprietà CSS3 border-block imposta i bordi verticali (logici)
La proprietà border-block consente di applicare stile, spessore e colore simultaneamente ai bordi verticali (inizio e fine del blocco, che in scrittura LTR corrispondono a bordo superiore e inferiore). È particolarmente utile nei layout multilingua perché segue il flusso logico del testo piuttosto che le direzioni fisiche fisse.
Sintassi
Significato dei valori principali:
-
width: specifica lo spessore del bordo (es.
1px,medium,thin). -
style: definisce lo stile del bordo, come
solid,dashed,dotted, ecc. -
color: indica il colore del bordo, espresso in formato esadecimale (
#000), RGB, HSL o parole chiave (black,blue, ecc.).
Esempio proprietà: border-block
Codice Esempio: border-block
.border-block-example {
border-block: 5px solid #4f86f7; /* Bordo superiore e inferiore */
padding: 20px;
background-color: #f2f2f2;
font-size: 20px;
text-align: center;
border-radius: 8px;
}
Contenuto Esempio: border-block
Esempio di utilizzo di border-block
In questo esempio, la proprietà border-block viene utilizzata per applicare un bordo allo stesso tempo alla parte superiore e inferiore di un elemento:
CSS e HTML per l'elemento con bordi logici (block):
<style>
.border-block-example {
border-block: 5px solid #4f86f7;
padding: 20px;
background-color: #fff;
font-size: 20px;
text-align: center;
border-radius: 8px;
}
</style>
<div class="border-block-example">
Bordo logico superiore e inferiore
</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
