Proprietà CSS border-inline

Pagina precedente border-image-width
Pagina successiva border-inline-color

Definizione e utilizzo

border-inline L'attributo è l'abbreviazione delle seguenti proprietà:

Se si omette il valore del colore o della larghezza, verrà utilizzato il valore predefinito.

CSS border-inline proprietà e border Le proprietà sono molto simili, ma border-inline L'attributo dipende dalla direzione in linea.

Attenzione:e le proprietà CSS correlate writing-mode,text-orientation e direction Definisce la direzione in linea. Questo influisce sulla posizione di inizio e fine della riga, nonché border-inline L'effetto dell'attributo. Per le pagine in inglese, la direzione in linea è da sinistra a destra, la direzione di blocco è verso il basso.

Esempio

Esempio 1

Impostare lo stile, il colore e la larghezza del bordo per diversi elementi in direzione in linea:

h1 {
  border-inline: 5px solid red;
}
h2 {
  border-inline: 4px dotted blue;
}
div {
  border-inline: double;
}

Prova da solo

Esempio 2: Combinazione dell'attributo writing-mode

La posizione di inizio e fine della direzione in linea del bordo è influenzata da writing-mode Impatto dell'attributo:

div {
  writing-mode: vertical-rl;
  border-inline: hotpink dashed 8px;
}

Prova da solo

Sintassi CSS

border-inline: border-inline-width border-inline-style border-inline-color |initial|inherit;

Valore dell'attributo

Valore	Descrizione
border-inline-width	Specificare la larghezza del bordo sulla direzione orizzontale in linea. Il valore predefinito è "medium".
border-inline-style	Specificare lo stile del bordo sulla direzione orizzontale in linea. Il valore predefinito è "none".
border-inline-color	Specificare il colore del bordo sulla direzione orizzontale in linea. Il valore predefinito è il colore del testo.
initial	Imposta questo attributo al suo valore predefinito. Vedi initial.
inherit	Eredita questo attributo dal suo elemento padre. Vedi inherit.

Dettagli tecnici

Valore predefinito:	medium none color
Ereditarietà:	no
Produzione dell'animazione:	sì, vedere proprietà individuali. Leggi qualcosa su animatable
Versione:	CSS3
Sintassi JavaScript:	object.style.borderInline="dashed hotpink 10px"