border-block-start-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'une technologie expérimentale.
Vérifiez attentivement le tableau de compatibilité des navigateurs avant de l'utiliser en production.

La propriété border-block-start-color définit la couleur de la bordure pour le côté du début 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és border-top-color, border-right-color, border-bottom-color ou border-left-color selon les valeurs des propriétés writing-mode, direction et text-orientation.

Exemple interactif

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

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

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

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

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    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-start-color: red;
border-block-start-color: #fffff;
border-block-start-color: rgb(200, 0, 0);

border-block-start-color: unset;
border-block-start-color: initial;
border-block-start-color: inherit;

Valeurs

<'border-color'>: Voir border-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-start-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-start-color: red;
}

HTML

html

<div>
  <p class="exemple">Texte d'exemple</p>
</div>

Résultat

Spécifications

Specification
CSS Logical Properties and Values Level 1 # border-color

Compatibilité des navigateurs

Voir aussi

Les propriétés physiques correspondantes :
writing-mode, direction, text-orientation

Help improve MDN

Learn how to contribute

Cette page a été modifiée le ⁨24 juin 2025⁩ par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content