border-block-end-color

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-color définit la couleur 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-color,border-right-color,border-bottom-color ouborder-left-color selon les valeurs définies pourwriting-mode,direction ettext-orientation.

Exemple interactif

border-block-end-color: red;writing-mode: horizontal-tb;

border-block-end-color: #32a1ce;writing-mode: vertical-rl;

border-block-end-color: rgb(170 50 220 / 0.6);writing-mode: horizontal-tb;

border-block-end-color: hsl(60 90% 50% / 0.8);writing-mode: vertical-lr;

<section>  <div>    This is a box with a border around it.  </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

border-block-end-color: yellow;border-block-end-color: #f5f6f7;/* Valeurs globales */border-block-end-color: inherit;border-block-end-color: initial;border-block-end-color: revert;border-block-end-color: revert-layer;border-block-end-color: unset;

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

Valeurs

<color>: La couleur de la bordure.

Définition formelle

Valeur initiale	`currentcolor`
Applicabilité	tous les éléments
Héritée	non
Valeur calculée	couleur calculée
Type d'animation	par type de valeur calculée

Syntaxe formelle

border-block-end-color =
<color>|
<image-1D>

<image-1D> =
<stripes()>

<stripes()> =
stripes(<color-stripe>#)

<color-stripe> =
<color>&&
[<length-percentage>|<flex>]?

<length-percentage> =
<length>|
<percentage>

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: 10px solid blue;  border-block-end-color: red;}