CSS border-inline-end-color
La proprietà CSS3 border-inline-end-color
imposta il colore del bordo sul lato finale logico
La proprietà border-inline-end-color
permette di specificare il colore del bordo situato sul lato finale in linea dell'elemento.
Questo lato corrisponde al bordo destro in scrittura LTR
(left-to-right) e al bordo sinistro in RTL
(right-to-left).
È parte delle proprietà logiche introdotte in CSS3 per una maggiore flessibilità nella gestione del layout nei contesti multilingua.
Sintassi
Significato dei valori principali:
-
color: definisce il colore del bordo sul lato finale in linea. Può essere espresso in formato esadecimale (
#ff0000
), RGB (rgb(255, 0, 0)
), HSL (hsl(0, 100%, 50%)
) o come parola chiave (blue
,orange
, ecc.).
Esempio proprietà: border-inline-end-color
Codice Esempio: border-inline-end-color

.border-inline-end-color-example {
width: 80%;
padding: 20px;
border-inline-end-width: 6px;
border-inline-end-style: solid;
border-inline-end-color: #d33682;
background-color: #fdf6e3;
font-size: 20px;
text-align: center;
direction: ltr;
border-radius: 8px;
}
Contenuto Esempio: border-inline-end-color
Esempio di utilizzo di border-inline-end-color
Qui il bordo è presente solo sul lato finale in linea (destro in LTR) con un colore specifico:
CSS e HTML per l'elemento con border-inline-end-color
:
<style>
.border-inline-end-color-example {
width: 80%;
padding: 20px;
border-inline-end-width: 6px;
border-inline-end-style: solid;
border-inline-end-color: #d33682;
background-color: #fdf6e3;
font-size: 20px;
text-align: center;
direction: ltr;
border-radius: 8px;
}
</style>
<div class="border-inline-end-color-example">
Bordo colorato sul lato 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.