Propriété border-block-width CSS

Page précédente border-block-style
Page suivante border-bottom

Définition et utilisation

border-block-width Définir la largeur de la bordure du contenu d'un élément de propriété dans la direction de bloc.

Note :Pour que border-block-width Pour que la propriété soit active, elle doit être définie border-block-style.

border-block-width Les valeurs des propriétés peuvent être définies de différentes manières :

Si border-block-width Les propriétés ont deux valeurs :

border-block-width: 10px 50px;

La largeur de la bordure au début du bloc est de 10px
La largeur de la bordure à la fin du bloc est de 50px

Si border-block-width L'attribut a une valeur :

border-block-width: 10px;

La largeur de la bordure au début et à la fin du bloc est de 10px

CSS border-block-width les attributs sont similaires aux attributs CSS border-bottom-width,border-left-width,border-right-width et border-top-width Très semblable, mais border-block-width L'attribut dépend de la direction du bloc.

Note :les propriétés CSS associées writing-mode Définit la direction du bloc. Cela affecte le début et la fin du bloc, ainsi que border-block-width Le résultat de l'attribut. Pour les pages en anglais, la direction en ligne est de gauche à droite, et la direction du bloc est vers le bas.

Exemple

Exemple 1

Définir la largeur de la bordure dans la direction du bloc :

#example1 {
  border-block-style: solid;
  border-block-width: 10px;
}
#example2 {
  border-block-style: solid;
  border-block-width: thin thick;
}

Essayez-le vous-même

Exemple 2 : combinaison de l'attribut writing-mode

La bordure de début et de fin du bloc est affectée par writing-mode Impact de l'attribut :

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

Essayez-le vous-même

Syntaxe CSS

border-block-width: medium|thin|thick|length|initial|inherit;

Valeur de l'attribut

Valeur	Description
medium	Spécifie la bordure moyenne. Valeur par défaut.
thin	Spécifie la bordure fine.
thick	Spécifie la bordure épaisse.
length	Vous permet de définir l'épaisseur de la bordure. Voir :Unités CSS.
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
Héritabilité :	Non
Réalisation de l'animation :	Prise en charge. Voir :Propriétés liées aux animations.
Version :	CSS3
Syntaxe JavaScript :	object.style.borderBlockWidth="3px 10px"