Propriété border-inline-end CSS

Page précédente couleur-border-inline
Page suivante couleur-border-inline-fin

Définition et utilisation

border-inline-end Les propriétés sont des abréviations des propriétés suivantes :

border-inline-end-width(largeur de bord de fin en ligne)
border-inline-end-style(style de bord de fin en ligne)
couleur-border-inline-fin(couleur de bord de fin en ligne)

de CSS border-inline-end Les propriétés sont équivalentes à border-bottom、border-left、border-right et border-top Les propriétés sont très similaires, mais border-inline-end Les propriétés dépendent de la direction en ligne.

Attention :Les propriétés CSS pertinentes writing-mode、text-orientation et direction Définit la direction en ligne. Cela affecte le début et la fin d'une ligne, ainsi que border-inline-end Le résultat de l'attribut. Pour les pages en anglais, la direction en ligne va de gauche à droite, et la direction en bloc va de haut en bas.

Exemple

Exemple 1

Définir la largeur, la couleur et le style du bord en fin de direction en ligne :

div {
  border-inline-end: 10px solid pink;
}

Essayez-le vous-même

Exemple 2 : combinaison de l'attribut writing-mode

La position du bord en fin de direction en ligne est influencée par writing-mode Impact de l'attribut :

div {
  writing-mode: vertical-rl;
  border-inline-end: 5px solid blue;
}

Essayez-le vous-même

Exemple 3 : combinaison de l'attribut direction

La position du bord en fin de direction en ligne est influencée par direction Impact de l'attribut :

div {
  direction: rtl;
  border-inline-end: 5px solid hotpink;
}

Essayez-le vous-même

Syntaxe CSS

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

Valeur de l'attribut

Valeur	Description
border-inline-end-width	Définit la largeur du bord de l'élément à la fin de la direction en ligne. La valeur par défaut est "medium".
border-inline-end-style	Définit le style du bord de l'élément à la fin de la direction en ligne. La valeur par défaut est "none".
couleur-border-inline-fin	Définit la couleur du bord de l'élément à la fin de la direction en ligne. La valeur par défaut est la couleur de bord actuelle.

Valeur

Description

border-inline-end-width

Définit la largeur du bord de l'élément à la fin de la direction en ligne.

La valeur par défaut est "medium".

border-inline-end-style

Définit le style du bord de l'élément à la fin de la direction en ligne.

La valeur par défaut est "none".

couleur-border-inline-fin

Définit la couleur du bord de l'élément à la fin de la direction en ligne.

La valeur par défaut est la couleur de bord actuelle.

Détails techniques

initial	Réinitialisez cette propriété à sa valeur par défaut. Voir initial.
inherit	Inherited from its parent element. Voir inherit.
Valeur par défaut :	medium none currentcolor
Héritabilité :	Non
Création d'animation :	Pris en charge. Voir :Propriétés liées aux animations.
Version :	CSS3
Syntaxe JavaScript :	object.style.borderInlineEnd="pink dotted 5px"