Attribut border-block CSS

Page précédente border
Page suivante border-block-color

Définition et utilisation

border-block L'attribut est une abréviation des attributs suivants :

Si la valeur de la couleur ou de la largeur est omise, la valeur par défaut est utilisée.

CSS border-block L'attribut est similaire à border Les attributs sont très similaires, mais border-block L'attribut dépend de la direction de bloc.

Remarque :les propriétés CSS associées writing-mode Définit la direction de bloc. Cela affecte le point de départ et de fin du bloc ainsi que border-block Le 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 les styles, les couleurs et les largeurs des bords pour différents éléments de direction de bloc :

h1 {
  border-block: 5px solid red;
}
h2 {
  border-block: 4px dotted blue;
}
div {
  border-block: double;
}

Essayez-le vous-même

Exemple 2 : combinaison de l'attribut writing-mode

La position de la bordure de début et de fin sur la direction de bloc est déterminée par writing-mode Effet de l'attribut :

div {
  writing-mode: vertical-rl;
  border-block: hotpink dashed 8px;
}

Essayez-le vous-même

Syntaxe CSS

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

Valeur de l'attribut

Valeur	Description
border-block-width	Spécifie l'épaisseur de la bordure sur la direction de bloc. La valeur par défaut est medium.
border-block-style	Spécifie le style de la bordure sur la direction de bloc. La valeur par défaut est none.
border-block-color	Spécifie la couleur de la bordure sur la direction de bloc. La valeur par défaut est la couleur du texte.
initial	Récupère la valeur par défaut de cette propriété. Voir : initial.
inherit	Inherits this property from its parent element. Voir : inherit.

Détails techniques

Valeur par défaut :	medium none color
Héritabilité :	Non
Création d'animation :	Prise en charge. Voir :Propriétés liées aux animations.
Version :	CSS3
Syntaxe JavaScript :	object.style.borderBlock="dashed hotpink 10px"