border-block-style

La propriété border-block-style permet de définir le style pour la bordure sur les côtés d'un élément qui correspondent à l'axe de bloc. Cette propriété logique correspond à différentes propriétés physiques selon le mode d'écriture, la direction et l'orientation du texte. Autrement dit, cette propriété correspond à border-top-style et border-bottom-style ou à border-left-style et border-right-style selon les valeurs des propriétés writing-mode, direction et text-orientation.

Exemple interactif

Pour les autres côtés, la bordure peut être mise en forme grâce à la propriété border-inline-style qui définit border-inline-start-style et border-inline-end-style.

Syntaxe

css

/* Valeurs de type <'border-style'> */
border-block-style: dashed;
border-block-style: dotted;
border-block-style: groove;

/* Valeurs globales */
border-block-style: inherit;
border-block-style: initial;
border-block-style: revert;
border-block-style: unset;

Valeur

<'border-style'>

Le style de la ligne pour la bordure. Voir border-style.

Définition formelle

Valeur initialenone
Applicabilitétous les éléments
Héritéenon
Valeur calculéecomme spécifié
Type d'animationdiscrète

Syntaxe formelle

border-block-style = 
  <'border-top-style'>{1,2}

Exemples

HTML

html

<div>
  <p class="texteExemple">Texte exemple</p>
</div>

CSS

css

div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.texteExemple {
  writing-mode: vertical-lr;
  border: 5px solid blue;
  border-block-style: dashed;
}

Résultat

Spécifications

Specification
CSS Logical Properties and Values Level 1
# propdef-border-block-style

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi