CSS border-block-style
La proprietà CSS3 border-block-style imposta lo stile del bordo sui lati di inizio e fine blocco
La proprietà border-block-style definisce lo stile del bordo logico superiore e inferiore (inizio e fine del blocco). Questo rende più semplice gestire bordi in layout che cambiano direzione o flusso del contenuto.
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, visibili con colore e larghezza appropriati.
Esempio proprietà: border-block-style
Codice Esempio: border-block-style
.border-block-style-example {
border-block-width: 4px;
border-block-style: dashed;
border-block-color: #2a9d8f;
padding: 20px;
background-color: #e0f2f1;
font-size: 20px;
text-align: center;
border-radius: 6px;
}
Contenuto Esempio: border-block-style
Esempio di utilizzo di border-block-style
In questo esempio, la proprietà border-block-style applica un bordo dashed sui lati di inizio e fine blocco logico (in alto e in basso):
CSS e HTML per l'elemento con border-block-style:
<style>
.border-block-style-example {
border-block-width: 4px;
border-block-style: dashed;
border-block-color: #2a9d8f;
padding: 20px;
background-color: #e0f2f1;
font-size: 20px;
text-align: center;
border-radius: 6px;
}
</style>
<div class="border-block-style-example">
Bordo logico superiore e inferiore 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
