Propriété CSS border-top-color

La propriété CSS border-top-color définit la couleur uniquement de la bordure supérieure d'un élément. Utilisez-la lorsque vous souhaitez que le bord supérieur diffère des trois autres côtés — par exemple, une barre d'accentuation colorée au-dessus d'une carte ou d'un en-tête de section.

Une bordure comporte trois parties : son style, sa largeur et sa couleur. La propriété border-top-color contrôle uniquement la couleur. Seule, elle ne produit rien de visible, car la valeur par défaut de border-style est none, ce qui supprime entièrement la bordure. Vous devez donc d'abord déclarer un style pour le bord supérieur — en utilisant border-style ou border-top-style — avant que la couleur ait quelque chose à peindre.

Pour définir les quatre couleurs de bordure en même temps plutôt qu'uniquement la supérieure, utilisez le raccourci border-color. Les propriétés équivalentes pour les autres côtés sont border-right-color, border-bottom-color et border-left-color.

La largeur de bordure par défaut est medium. Vous pouvez la modifier avec border-width ou border-top-width.

Valeur initiale	currentColor
S'applique à	Tous les éléments. S'applique également à ::first-letter.
Hérité	Non
Animatable	Oui. La couleur de la bordure supérieure est animatable.
Version	CSS1
Syntaxe DOM	object.style.borderTopColor = "black";

Syntaxe

Syntaxe de la propriété CSS border-top-color

border-top-color: color | transparent | initial | inherit;

Exemple de la propriété border-top-color :

Exemple de la propriété CSS border-top-color

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 300px;
        padding: 20px;
        border-style: solid;
        border-color: #666;
        border-top-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Border-top-color example</h2>
    <div>Example for the border-top-color property with different top border color.</div>
  </body>
</html>

Essayez vous-même »

Résultat

Exemple de la propriété border-top-color avec la valeur « transparent » :

Exemple de la propriété CSS border-top-color avec la valeur transparent

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h2 {
        padding-bottom: 8px;
        text-align: center;
        border: 12px groove #1c87c9;
        border-top-color: transparent;
      }
    </style>
  </head>
  <body>
    <h2>A heading with a transparent top border</h2>
  </body>
</html>

Essayez vous-même »

Info

Les valeurs hexadécimales, RGB, RGBA, HSL, HSLA ou les noms de couleur peuvent être utilisés comme valeur pour la propriété border-top-color.

Exemple de la propriété border-top-color avec une valeur de couleur nommée :

Exemple de la propriété CSS border-top-color avec la valeur darkred (couleur nommée)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        padding: 10px;
        width: 50%;
        border: solid #666;
        border-top-color: darkred;
      }
    </style>
  </head>
  <body>
    <div>Border-top-color property with a named color value.</div>
  </body>
</html>

Essayez vous-même »

Exemple de la propriété border-top-color avec une valeur hexadécimale :

Exemple de la propriété CSS border-top-color avec une valeur hexadécimale

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        padding: 10px;
        width: 50%;
        border: solid #666;
        border-top-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <div>Border-top-color property with a hexadecimal value.</div>
  </body>
</html>

Essayez vous-même »

Exemple de la propriété border-top-color avec une valeur RGB :

Exemple de la propriété CSS border-top-color avec une valeur RGB

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        padding: 10px;
        width: 50%;
        border: solid #666;
        border-top-color: rgb(142, 191, 66);
      }
    </style>
  </head>
  <body>
    <div>Border-top-color property with a RGB value.</div>
  </body>
</html>

Essayez vous-même »

Exemple de la propriété border-top-color avec une valeur HSL :

Exemple de la propriété CSS border-top-color avec une valeur HSL

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        padding: 10px;
        width: 50%;
        border: solid #666;
        border-top-color: hsl(24, 80%, 50%);
      }
    </style>
  </head>
  <body>
    <div>Border-top-color property with a HSL value.</div>
  </body>
</html>

Essayez vous-même »

Valeurs

Valeur	Description	Essayer
color	Définit la couleur de la bordure supérieure. La couleur par défaut est la couleur de l'élément courant. Les noms de couleur, les codes hexadécimaux, rgb(), rgba(), hsl(), hsla() peuvent être utilisés. Valeur obligatoire.	Essayer »
transparent	Applique une couleur transparente à la bordure supérieure. La bordure supérieure occupera toujours l'espace défini par la valeur border-width.	Essayer »
initial	Réinitialise la propriété à sa valeur par défaut.	Essayer »
inherit	Hérite la propriété de son élément parent.

Points à retenir

La couleur seule ne suffit pas. Comme border-style vaut none par défaut, la bordure supérieure reste invisible tant que vous ne définissez pas un style (solid, dashed, groove, etc.). Associez toujours border-top-color à un style.
currentColor est la valeur par défaut. Si vous ne définissez jamais border-top-color, la bordure utilise la valeur color de l'élément. Modifier la color du texte modifiera également la couleur d'une bordure sans style défini.
transparent réserve quand même de l'espace. Une bordure supérieure transparente conserve son border-top-width, de sorte que la mise en page ne se décale pas — utile pour les effets de survol qui remplacent une bordure transparente par une bordure visible.
Tous les formats de couleur sont acceptés. Les noms de couleur, l'hexadécimal (#1c87c9), rgb(), rgba(), hsl() et hsla() sont tous valides. Utilisez rgba()/hsla() lorsque vous avez besoin d'une transparence partielle.

Propriétés associées

border-top — raccourci pour la largeur, le style et la couleur de la bordure supérieure en une seule déclaration.
border-top-style et border-top-width — les deux autres parties de la bordure supérieure.
border-color — définit la couleur des quatre bordures en même temps.
border-bottom-color, border-right-color, border-left-color — les propriétés de couleur par côté pour les autres bords.

Pratique

À quoi sert la propriété 'border-top-color' en CSS ?

La propriété est utilisée pour changer la couleur de la bordure inférieure d'un élément.La propriété est utilisée pour changer la couleur de la bordure supérieure d'un élément.La propriété est utilisée pour changer la couleur de la bordure gauche d'un élément.La propriété est utilisée pour changer la couleur de la bordure droite d'un élément.La propriété est utilisée pour changer la couleur de toutes les bordures d'un élément.