CSS border-inline-style
La proprietà CSS3 border-inline-style imposta lo stile dei bordi inline (iniziale e finale)
La proprietà border-inline-style permette di specificare in un’unica dichiarazione lo stile dei bordi posti sui lati inline di un elemento, cioè quelli a sinistra o destra a seconda della direzione del testo.
Può accettare uno o due valori: se uno solo, viene applicato ad entrambi i lati inline; se due, il primo valore vale per inline-start, il secondo per inline-end.
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.
Se viene fornito un solo valore, si applica a entrambi i lati inline (start e end). Se ne vengono forniti due, il primo si applica a inline-start e il secondo a inline-end.
Esempio proprietà: border-inline-style
Codice Esempio: border-inline-style
.border-inline-style-example {
width: 80%;
padding: 20px;
border-inline-start-width: 5px;
border-inline-end-width: 5px;
border-inline-style: solid dashed;
border-inline-start-color: #2980b9;
border-inline-end-color: #c0392b;
background-color: #eaf2f8;
font-size: 20px;
text-align: center;
direction: ltr;
border-radius: 8px;
}
Contenuto Esempio: border-inline-style
Esempio di utilizzo di border-inline-style
In questo esempio, il bordo inline-start ha uno stile solido, mentre il bordo inline-end è tratteggiato:
CSS e HTML per l'elemento con border-inline-style:
<style>
.border-inline-style-example {
width: 80%;
padding: 20px;
border-inline-start-width: 5px;
border-inline-end-width: 5px;
border-inline-style: solid dashed;
border-inline-start-color: #2980b9;
border-inline-end-color: #c0392b;
background-color: #eaf2f8;
font-size: 20px;
text-align: center;
direction: ltr;
border-radius: 8px;
}
</style>
<div class="border-inline-style-example">
Bordo inline-start solido e inline-end tratteggiato
</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
