border-block-style

Baseline Widely available

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éCSSborder-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ésborder-top-style etborder-bottom-style, ouborder-left-style etborder-right-style selon les valeurs définies pourwriting-mode,direction ettext-orientation.

Le style de bordure dans l'autre dimension peut être défini avecborder-inline-style, qui définitborder-inline-start-style etborder-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>  <div>    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. Voirborder-style.

Définition formelle

Valeur initiale	`none`
Applicabilité	tous les éléments
Héritée	non
Valeur calculée	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>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;}