Propriété CSS `border-block-start-color`

Baseline Large disponibilité

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.

En savoir plus
Voir la compatibilité complète

La propriété CSSborder-block-start-color définit la couleur de la bordure logique de début 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 ou border-left-color selon les valeurs définies pour 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">
    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

border-block-start-color: blue;
border-block-start-color: #4c5d21;

/* Valeurs globales */
border-block-start-color: inherit;
border-block-start-color: initial;
border-block-start-color: revert;
border-block-start-color: revert-layer;
border-block-start-color: unset;

Les propriétés associées sont border-block-end-color, border-inline-start-color et border-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-start-color = 
  <color>     |
  <image-1D>  

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

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

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

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

Exemples

Bordure avec couleur et texte vertical

HTML

html

<div>
  <p class="exempleTexte">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-start-color: red;
}