Propriété border-block-start CSS

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

Définition et utilisation

border-block-start Les propriétés sont les abréviations des propriétés suivantes :

CSS border-block-start les attributs avec border-bottom,border-left,border-right et border-top Les attributs sont très similaires, mais border-block-start L'attribut dépend de la direction de bloc.

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

Exemple

Exemple 1

Définir la largeur, la couleur et le style de la bordure à l'origine de la direction de bloc :

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

Essayez-le vous-même

Exemple 2 : combinaison de l'attribut writing-mode

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

div {
  writing-mode: vertical-rl;
  border-block-start: dotted blue;
}

Essayez-le vous-même

Syntaxe CSS

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

Valeur de l'attribut

Valeur	Description
border-block-start-width	Définit la largeur de la bordure à l'origine de l'élément en direction de bloc. La valeur par défaut est medium.
border-block-start-style	Définit le style de la bordure à l'origine de l'élément en direction de bloc. La valeur par défaut est none.
border-block-start-color	Définit la couleur de la bordure à l'origine de l'élément en direction de bloc. 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.borderBlockStart="pink dotted 5px"