CSS border-inline-start-color
La proprietà CSS3 border-inline-start-color
imposta il colore del bordo sul lato iniziale logico
La proprietà border-inline-start-color
consente di definire il colore del bordo situato sul lato iniziale in linea dell’elemento, cioè il bordo sinistro in LTR
e il destro in RTL
.
Questa proprietà è utile in contesti dove il layout deve adattarsi automaticamente alla direzione del contenuto.
Sintassi
Significato dei valori principali:
color: il colore del bordo, espresso in uno qualsiasi dei formati CSS validi:
#hex
,rgb()
,hsl()
,rgba()
, oppure con parole chiave comeblue
,crimson
,transparent
, ecc.
Esempio proprietà: border-inline-start-color
Codice Esempio: border-inline-start-color

.border-inline-start-color-example {
width: 80%;
padding: 20px;
border-inline-start-width: 6px;
border-inline-start-style: solid;
border-inline-start-color: #16a085;
background-color: #f0fdfa;
font-size: 20px;
text-align: center;
direction: ltr;
border-radius: 8px;
}
Contenuto Esempio: border-inline-start-color
Esempio di utilizzo di border-inline-start-color
In questo esempio, il bordo iniziale in linea ha un colore verde acqua personalizzato:
CSS e HTML per l'elemento con border-inline-start-color
:
<style>
.border-inline-start-color-example {
width: 80%;
padding: 20px;
border-inline-start-width: 6px;
border-inline-start-style: solid;
border-inline-start-color: #16a085;
background-color: #f0fdfa;
font-size: 20px;
text-align: center;
direction: ltr;
border-radius: 8px;
}
</style>
<div class="border-inline-start-color-example">
Colore del bordo 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.