Attribut border-inline CSS

Page précédente border-image-width
Page suivante border-inline-color

Définition et utilisation

border-inline La propriété est une abréviation des propriétés suivantes :

Si la valeur de la couleur ou de la largeur est omise, la valeur par défaut sera utilisée.

de CSS border-inline les propriétés avec border Les propriétés sont très similaires, mais border-inline Cette propriété dépend de la direction horizontale.

Remarque :les attributs CSS associés writing-mode,text-orientation et direction Définit la direction horizontale. Cela affecte le début et la fin d'une ligne, ainsi que border-inline L'effet de l'attribut. Pour les pages en anglais, la direction horizontale est de gauche à droite, et la direction en bloc est vers le bas.

Exemple

Exemple 1

Définissez le style, la couleur et la largeur de la bordure pour différents éléments horizontaux :

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

Essayez-le vous-même

Exemple 2 : association avec l'attribut writing-mode

La bordure de début et de fin de la direction horizontale est affectée par writing-mode Effet de l'attribut :

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

Essayez-le vous-même

Syntaxe CSS

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

Valeur de l'attribut

Valeur	Description
border-inline-width	Spécifiez la largeur de la bordure horizontale directionnelle. La valeur par défaut est "medium".
border-inline-style	Spécifiez le style de la bordure horizontale directionnelle. La valeur par défaut est "none".
border-inline-color	Spécifiez la couleur de la bordure horizontale directionnelle. La valeur par défaut est la couleur du texte.
initial	Rétablir cette propriété à sa valeur par défaut. Voir initial.
inherit	Cette propriété hérite de son élément parent. Voir inherit.

Détails techniques

Valeur par défaut :	medium none color
Héritabilité :	non
Création d'animation :	oui, voir les propriétés individuelles. Lire à propos d'animatable
Version :	CSS3
Syntaxe JavaScript :	object.style.borderInline="dashed hotpink 10px"