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⁩.

Expérimental:Il s'agit d'unetechnologie expérimentale.
Vérifiez attentivement letableau de compatibilité des navigateurs avant de l'utiliser en production.

La propriétéborder-block-end-color définit la couleur de la bordure pour le côté de la fin de l'élément orienté orthogonalement à l'axe de lecture. Elle correspond à une propriété physique selon le mode d'écriture de l'élément, sa directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétésborder-top-color,border-right-color,border-bottom-color ouborder-left-color selon les valeurs des propriétéswriting-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: #eee;  color: #000;  border: 0.75em solid;  padding: 0.75em;  width: 80%;  height: 100px;  unicode-bidi: bidi-override;}

Cette propriété est à rapprocher des autres propriétés logiques permettant de définir les couleurs de la bordure d'un élément :

Syntaxe

css

border-block-end-color: red;border-block-end-color: #fffff;border-block-end-color: rgb(200, 0, 0);border-block-end-color: unset;border-block-end-color: initial;border-block-end-color: inherit;

Valeurs

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

Définition formelle

Valeur initiale	`currentcolor`
Applicabilité	tous les éléments
Héritée	non
Valeur calculée	couleur calculée
Type d'animation	by computed value type

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

CSS

css

div {  background-color: yellow;  width: 120px;  height: 120px;}.exemple {  writing-mode: vertical-lr;  border: 10px solid blue;  border-block-end-color: red;}