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

Baseline Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis avril 2021.

La propriété CSS border-block-style définit le style des bordures logiques de bloc d'un élément, qui correspond à un style de bordure physique selon le mode d'écriture, la direction et l'orientation du texte de l'élément. Elle peut correspondre aux propriétés border-top-style et border-bottom-style, ou border-left-style et border-right-style selon les valeurs définies pour writing-mode, direction et text-orientation.

Le style de bordure dans l'autre dimension peut être défini avec border-inline-style, qui définit border-inline-start-style et border-inline-end-style.

Exemple interactif

border-block-style: dotted;
writing-mode: horizontal-tb;

border-block-style: dotted;
writing-mode: vertical-rl;

border-block-style: groove;
writing-mode: horizontal-tb;
direction: rtl;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    Ceci est une boîte avec une bordure autour.
  </div>
</section>

#example-element {
  background-color: #eeeeee;
  color: black;
  border: 0.75em solid;
  padding: 0.75em;
  width: 80%;
  height: 100px;
  unicode-bidi: bidi-override;
}

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: revert-layer;
border-block-style: unset;

Valeur

<'border-style'>: Le style de la ligne pour la bordure. Voir border-style.

Définition formelle

Valeur initiale	pour chaque propriété individuelle de la propriété raccourcie : `border-block-start-style`: `none` `border-block-end-style`: `none`
Applicabilité	tous les éléments
Héritée	non
Valeur calculée	pour chaque propriété individuelle de la propriété raccourcie : `border-block-start-style`: comme défini `border-block-end-style`: comme défini
Type d'animation	discrète

Syntaxe formelle

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

<border-top-style> = 
  <line-style>  

<line-style> = 
  none    |
  hidden  |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset

Exemples

Bordure en pointillés avec du texte vertical

HTML

html

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

CSS

css

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

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