CSS border-inline
La proprietà CSS3 border-inline imposta i bordi logici in linea (sinistro e destro)
La proprietà border-inline fa parte delle proprietà logiche introdotte in CSS3 per una maggiore flessibilità nella scrittura bidirezionale.
Essa imposta contemporaneamente i bordi nei lati logici in linea dell'elemento, che corrispondono ai lati sinistro e destro in un contesto LTR (left-to-right).
È utile per creare layout internazionali e reattivi che si adattano alla direzione del contenuto.
Sintassi
Significato dei valori principali:
-
width: specifica lo spessore del bordo, ad esempio
1px,0.5em,thin,medium,thick. -
style: definisce lo stile del bordo, come
solid,dashed,dotted,double, ecc. -
color: imposta il colore del bordo. Può essere espresso in esadecimale (
#000), RGB, HSL o nomi di colore (blue,green...).
Esempio proprietà: border-inline
Codice Esempio: border-inline
.border-inline-example {
width: 80%;
padding: 20px;
border-inline: 5px dashed #007acc;
background-color: #f4f4f4;
font-size: 20px;
text-align: center;
direction: ltr;
border-radius: 10px;
}
Contenuto Esempio: border-inline
Esempio di utilizzo di border-inline
In questo esempio, la proprietà border-inline viene utilizzata per applicare lo stesso bordo a sinistra e a destra di un elemento, rispettando la direzione del testo:
CSS e HTML per l'elemento con border-inline:
<style>
.border-inline-example {
width: 80%;
padding: 20px;
border-inline: 5px dashed #007acc;
background-color: #f4f4f4;
font-size: 20px;
text-align: center;
direction: ltr;
border-radius: 10px;
}
</style>
<div class="border-inline-example">
Elemento con bordi logici inline (sinistro e destro)
</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
