CSS border-inline-start
La proprietà CSS3 border-inline-start imposta il bordo sul lato iniziale logico
La proprietà border-inline-start definisce il bordo sul lato iniziale in linea dell’elemento.
In direzione LTR, corrisponde al bordo sinistro; in RTL, al bordo destro.
È una proprietà logica introdotta in CSS3, pensata per supportare layout multilingua e adattivi.
Sintassi
Significato dei valori principali:
-
width: larghezza del bordo (es.
2px,thin,medium). -
style: stile del bordo (es.
solid,dashed,none). -
color: colore del bordo (es.
#1abc9c,teal,rgb(26, 188, 156)).
Esempio proprietà: border-inline-start
Codice Esempio: border-inline-start
.border-inline-start-example {
width: 80%;
padding: 20px;
border-inline-start: 6px dotted #1abc9c;
background-color: #eafaf1;
font-size: 20px;
text-align: center;
direction: ltr;
border-radius: 8px;
}
Contenuto Esempio: border-inline-start
Esempio di utilizzo di border-inline-start
Questo esempio mostra un bordo visibile solo sul lato iniziale in linea (a sinistra in LTR):
CSS e HTML per l'elemento con border-inline-start:
<style>
.border-inline-start-example {
width: 80%;
padding: 20px;
border-inline-start: 6px dotted #1abc9c;
background-color: #eafaf1;
font-size: 20px;
text-align: center;
direction: ltr;
border-radius: 8px;
}
</style>
<div class="border-inline-start-example">
Bordo applicato sul lato iniziale (inline-start)
</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
