CSS border-block-start
La proprietà CSS3 border-block-start imposta il bordo all'inizio del blocco
La proprietà border-block-start è una scorciatoia per definire larghezza, stile e colore del bordo logico all'inizio del blocco (tipicamente il bordo superiore). Questa proprietà si adatta automaticamente alla direzione del contenuto ed è ideale per layout multilingua o adattivi.
Sintassi
Significato dei valori principali:
width: lo spessore del bordo, es.
2px,medium,0.2rem.style: lo stile del bordo, come
solid,dotted,dashed, ecc.color: il colore del bordo, esprimibile in formato esadecimale, RGB, HSL o parole chiave (
blue,#333,rgb(0,0,0)).
Esempio proprietà: border-block-start
Codice Esempio: border-block-start
.border-block-start-example {
border-block-start: 5px dotted #457b9d; /* Bordo logico superiore */
padding: 20px;
background-color: #f1faee;
font-size: 20px;
text-align: center;
border-radius: 6px;
}
Contenuto Esempio: border-block-start
Esempio di utilizzo di border-block-start
In questo esempio, border-block-start viene usato per applicare un bordo solo all'inizio del blocco (di solito in alto):
CSS e HTML per l'elemento con border-block-start:
<style>
.border-block-start-example {
border-block-start: 5px dotted #457b9d;
padding: 20px;
background-color: #f1faee;
font-size: 20px;
text-align: center;
border-radius: 6px;
}
</style>
<div class="border-block-start-example">
Bordo logico in alto punteggiato
</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
