border-block-end-width

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 janvier 2020.

La propriétéCSSborder-block-end-width définit la largeur de la bordure logique de fin de bloc d'un élément, qui correspond à une bordure physique selon le mode d'écriture, la direction et l'orientation du texte de l'élément. Elle peut correspondre àborder-top-width,border-right-width,border-bottom-width ouborder-left-width selon les valeurs définies pourwriting-mode,direction ettext-orientation.

Exemple interactif

border-block-end-width: thick;writing-mode: horizontal-tb;

border-block-end-width: thick;writing-mode: vertical-rl;

border-block-end-width: 4px;writing-mode: horizontal-tb;

border-block-end-width: 4px;writing-mode: vertical-lr;

<section>  <div>    Ceci est une boîte avec une bordure autour.  </div></section>

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

Syntaxe

css

/* Valeurs de type <'border-width'> */border-block-end-width: 5px;border-block-end-width: thick;/* Valeurs globales */border-block-end-width: inherit;border-block-end-width: initial;border-block-end-width: revert;border-block-end-width: revert-layer;border-block-end-width: unset;

Les propriétés associées sontborder-block-start-width,border-inline-start-width etborder-inline-end-width, qui définissent les autres largeurs de bordure de l'élément.

Valeurs

<'border-width'>: La largeur utilisée pour la bordure, voirborder-width.

Définition formelle

Valeur initiale	`medium`
Applicabilité	tous les éléments
Héritée	non
Pourcentages	largeur logique du bloc englobant
Valeur calculée	une longueur absolue ;`0` si le style de la bordure vaut`none` ou`hidden`
Type d'animation	par type de valeur calculée

Syntaxe formelle

border-block-end-width =
<line-width>

<line-width> =
<length [0,∞]>|
thin|
medium|
thick

Exemples

Bordure avec du texte vertical

HTML

html

<div>  <p>Texte d'exemple</p></div>

CSS

css

div {  background-color: yellow;  width: 120px;  height: 120px;}.exempleTexte {  writing-mode: vertical-lr;  border: 1px solid blue;  border-block-end-width: 5px;}