Attribut border-inline-start CSS

Page précédente border-inline-end-width
Page suivante border-inline-start-color

Définition et utilisation

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

CSS border-inline-start La propriété est une abréviation des propriétés CSS suivantes : border-bottom、border-left、border-right et border-top Très semblable, mais border-inline-start La propriété dépend de la direction en ligne.

Attention :les propriétés CSS associées 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-start 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 de la bordure à l'origine de la direction en ligne :

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

Essayez-le vous-même

Exemple 2 : Combiné avec l'attribut writing-mode

La position de la bordure à l'origine de la direction en ligne est affectée par writing-mode Impact de l'attribut :

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

Essayez-le vous-même

Exemple 3 : Combiné avec l'attribut direction

La position de la bordure à l'origine de la direction en ligne est affectée par direction Impact de l'attribut :

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

Essayez-le vous-même

Syntaxe CSS

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

Valeur de l'attribut

Valeur	Description
border-inline-start-width	Définit la largeur de la bordure à l'origine de la direction en ligne de l'élément. La valeur par défaut est medium.
border-inline-start-style	Définit le style de la bordure à l'origine de la direction en ligne de l'élément. La valeur par défaut est none.
border-inline-start-color	Définit la couleur de la bordure à l'origine de la direction en ligne de l'élément. La valeur par défaut est la couleur actuelle de la bordure.
initial	Réinitialise cette propriété à sa valeur par défaut. Voir initial.
inherit	Inherits this property from its parent element. Voir inherit.

Détails techniques

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.borderInlineStart="pink dotted 5px"