border-color

Valeurs

• couleur – n’importe quelle syntaxe de couleur : #38b8f9, rgb(…), hsl(…), un nom, transparent.
• currentColor – par défaut : la couleur du texte de l’élément (la propriété color).
• Une à quatre valeurs se répartissent sur les côtés comme pour margin (haut, droite, bas, gauche).

Les côtés séparés : border-top-color, border-right-color, border-bottom-color, border-left-color.

Valeur initiale : currentColor. Héritée : non. S’applique à : tous les éléments.

Exemples

Une bordure sans couleur prend la couleur du texte ; une bordure transparente réserve la place pour la mise en évidence, donc rien ne bouge au survol :

<p class="note">La bordure a la couleur du texte.</p>
<a href="#" class="item">Élément du menu</a>

.note {
  max-width: 260px;
  padding: 6px 10px;
  color: #e91e63;
  border: 2px solid;
}
.item {
  display: inline-block;
  padding: 6px 10px;
  border: 2px solid transparent;
}
.item:hover { border-color: #38b8f9; }

Chaque côté d’une couleur différente – les quatre triangles montrent comment les côtés se partagent les coins :

<div class="four"></div>

.four {
  width: 40px;
  height: 40px;
  border-width: 20px;
  border-style: solid;
  border-color: #38b8f9 #e91e63 #8bc34a #ff9800;
}

Points d’attention

• Sans border-style, la couleur n’affiche rien.
• Pour changer la couleur au survol (:hover), changez seulement la couleur, pas l’épaisseur – sinon l’élément et ce qui l’entoure bougent. C’est pourquoi la bordure a au repos la couleur transparent.
• Les coins d’une bordure sont partagés entre les côtés en diagonale. C’est le principe de l’astuce des triangles en CSS (une bordure aux côtés transparents) ; aujourd’hui, clip-path est plus simple.

Prise en charge par les navigateurs

Baseline – largement disponible : fonctionne dans tous les navigateurs courants, et depuis longtemps (au plus tard depuis 2015). Depuis la version : Chrome 1, Firefox 1, Safari 1. État : octobre 2026 (MDN browser-compat-data).

Voir aussi :
border
border-style
border-width
color