CSS border-inline-start-style
La proprietà CSS3 border-inline-start-style
imposta lo stile del bordo sul lato iniziale logico
La proprietà border-inline-start-style
consente di definire lo stile del bordo sul lato iniziale in linea di un elemento.
È utile nei layout che devono adattarsi alla direzione del testo (es. LTR
o RTL
), fornendo flessibilità nella definizione grafica del bordo.
Sintassi
Significato dei valori principali:
none: nessun bordo.
solid: linea continua.
dashed: linea tratteggiata.
dotted: linea a puntini.
double: linea doppia.
groove / ridge / inset / outset: effetti 3D basati sul colore.
Esempio proprietà: border-inline-start-style
Codice Esempio: border-inline-start-style

.border-inline-start-style-example {
width: 80%;
padding: 20px;
border-inline-start-width: 5px;
border-inline-start-style: dotted;
border-inline-start-color: #9b59b6;
background-color: #f9f0fb;
font-size: 20px;
text-align: center;
direction: ltr;
border-radius: 8px;
}
Contenuto Esempio: border-inline-start-style
Esempio di utilizzo di border-inline-start-style
In questo esempio, il bordo iniziale in linea ha uno stile a puntini (dotted):
CSS e HTML per l'elemento con border-inline-start-style
:
<style>
.border-inline-start-style-example {
width: 80%;
padding: 20px;
border-inline-start-width: 5px;
border-inline-start-style: dotted;
border-inline-start-color: #9b59b6;
background-color: #f9f0fb;
font-size: 20px;
text-align: center;
direction: ltr;
border-radius: 8px;
}
</style>
<div class="border-inline-start-style-example">
Bordo a puntini 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.