border-right-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 juillet 2015.

La propriété border-right-color définit la couleur utilisée pour la bordure droite d'un élément. Pour avoir une formulation plus concise, on pourra utiliser les propriétés raccourcies border-color et/ou border-right.

Exemple interactif

border-right-color: red;

border-right-color: #32a1ce;

border-right-color: rgb(170, 50, 220, 0.6);

border-right-color: hsl(60, 90%, 50%, 0.8);

border-right-color: transparent;

<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;
}

Syntaxe

css

/* Valeurs de type <color> */
border-right-color: red;
border-right-color: rgb(255, 128, 0);
border-right-color: hsla(100%, 50%, 25%, 0.75);
border-right-color: #ffbb00;
border-right-color: currentColor;
border-right-color: transparent;

/* Valeurs globales */
border-right-color: inherit;
border-right-color: initial;
border-right-color: unset;

Valeurs

<color>: Une valeur de couleur (type <color>) qui décrit la couleur utilisée pour la bordure du côté droit.

Définition formelle

Valeur initiale	`currentcolor`
Applicabilité	tous les éléments. S'applique aussi à `::first-letter`.
Héritée	non
Valeur calculée	couleur calculée
Type d'animation	une couleur

Syntaxe formelle

border-right-color = 
  <color>     |
  <image-1D>  

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

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

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

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

Exemples

CSS

css

.maboite {
  border: solid 0.3em gold;
  border-right-color: red;
  width: auto;
}

.texterouge {
  color: red;
}

HTML

html

<div class="maboite">
  <p>
    Une boîte avec une bordure autour. Notez le côté de la boîte qui est
    <span class="texterouge">rouge</span>.
  </p>
</div>

Résultat

Spécifications

Specification
CSS Backgrounds and Borders Module Level 3 # border-color

Compatibilité des navigateurs

Voir aussi

Les propriétés raccourcies liées aux bordures
- border,
- border-right,
- border-color.
Les propriétés de couleur pour les autres bordures :
Les autres propriétés liées à la bordure droite :
- border-right-style,
- border-right-width.

Help improve MDN

Learn how to contribute

Cette page a été modifiée le 1 nov. 2025 par les contributeurs du MDN.

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