CSS border-inline-end
La proprietà CSS3 border-inline-end imposta il bordo sul lato finale logico
La proprietà border-inline-end definisce il bordo sul lato finale in linea di un elemento, che corrisponde al bordo destro in direzione LTR (left-to-right) e al bordo sinistro in RTL (right-to-left).
Fa parte delle proprietà logiche introdotte in CSS3 per facilitare il supporto multilingua e la scrittura bidirezionale.
Sintassi
Significato dei valori principali:
-
width: la larghezza del bordo sul lato finale in linea (es.
2px,medium, ecc.). -
style: lo stile del bordo (es.
solid,dotted,none). -
color: il colore del bordo (es.
#ff0000,rgb(255,0,0),red).
Esempio proprietà: border-inline-end
Codice Esempio: border-inline-end
.border-inline-end-example {
width: 80%;
padding: 20px;
border-inline-end: 6px solid #e67e22;
background-color: #fdf6e3;
font-size: 20px;
text-align: center;
direction: ltr;
border-radius: 8px;
}
Contenuto Esempio: border-inline-end
Esempio di utilizzo di border-inline-end
In questo esempio, il bordo viene applicato solo al lato finale in linea dell’elemento (a destra in scrittura LTR):
CSS e HTML per l'elemento con border-inline-end:
<style>
.border-inline-end-example {
width: 80%;
padding: 20px;
border-inline-end: 6px solid #e67e22;
background-color: #fdf6e3;
font-size: 20px;
text-align: center;
direction: ltr;
border-radius: 8px;
}
</style>
<div class="border-inline-end-example">
Bordo applicato solo sul lato finale (inline-end)
</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
