Propriété border-block-end-style CSS

page précédente border-block-end-color
page suivante border-block-end-width

Définition et utilisation

border-block-end-style sont utilisées pour définir le style des bordures à l'extrémité de l'élément dans la direction en bloc.

CSS border-block-end-style les propriétés de border-bottom-style、border-left-style、border-right-style et border-top-style Les attributs sont très similaires, mais border-block-end-style L'attribut dépend de la direction en bloc.

Attention :les attributs CSS associés writing-mode Définit la direction en bloc. Cela affecte le point de départ et de fin du bloc ainsi que border-block-end-style Résultat de l'attribut. Pour les pages en anglais, la direction en ligne est de gauche à droite, et la direction en bloc est vers le bas.

Exemple

Exemple 1

Définir le style du bord de fin de direction en bloc :

div {
  border-block-end-style: dotted;
}

Essayez-le vous-même

Exemple 2 : combinaison de l'attribut writing-mode

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

div {
  border-block-end-style: solid;
  writing-mode: vertical-rl;
  border-block-end-width: 5px;
}

Essayez-le vous-même

Syntaxe CSS

border-block-end-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

Valeur de l'attribut

Valeur	Description
none	Valeur par défaut. Spécifie pas de bord.
hidden	Identique à "none", mais différent dans la résolution des conflits de bord des éléments de tableau.
dotted	Définit un bord pointillé.
dashed	Définit un bord pointillé.
solid	Définit un bord solide.
double	Définit un bord double.
groove	Définit un bord en rainures 3D. L'effet dépend de la valeur de border-color.
ridge	Définit un bord en bosses 3D. L'effet dépend de la valeur de border-color.
inset	Définit un bord en relief 3D. L'effet dépend de la valeur de border-color.
outset	Définit un bord arrondi 3D. L'effet dépend de la valeur de border-color.
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 :	none
Héritabilité :	Non
Création d'animation :	no. Lire à propos d'animatable
Version :	CSS3
Syntaxe JavaScript :	object.style.borderBlockEndStyle="dotted"