Propriété CSS border-top-color

La propriété border-top-color définit la couleur de la bordure supérieure d'un élément.

La couleur de la bordure supérieure, combiné avec les couleurs des bordures droites, gauches et inférieures, peuvent également être définies à l'aide de la propriété raccourcie border color.

Si vous utilisez la propriété border-top-color, vous devez premièrement définir les propriétés border-style ou border-top-style et ensuite changer la couleur du style défini.

La largeur initiale de la bordure est moyenne. Vous pouvez spécifier la largeur en utilisant les propriétés border-width ou border-top-width.

Valeur Initiale currentColor
Appliquée à Tous les éléments. Elle est aussi appliquée à pseudo-élément ::first-letter.
Héritée Non
Animable Oui. La couleur de la bordure supérieure est animable.
Vérsion CSS1
Syntaxe DOM object.style.borderTopColor = "black";

Syntaxe

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

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div {
      width: 300px;
      padding: 20px;
      border-style: solid;
      border-color: #666;
      border-top-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2> Exemple de border-top-color</h2>
    <div>Exemple de la propriété border-top-color avec la couleur différente de la bordure supérieure.</div>
  </body>
</html>

Voyons un autre exemple, où la valeur est définie à transparent pour la bordure supérieure.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      h2 {
      padding-bottom: 8px; 
      text-align: center;   
      border: 12px groove #1c87c9;
      border-top-color: transparent;
      }
    </style>
  </head>
  <body>
    <h2>Un titre avec une bordure supérieure transparent.</h2>
  </body>
</html>
Hexadecimal, RGB, RGBA, HSL, HSLA ou les noms des couleurs peuvent être appliquées en tant qu'une valeur pour la propriété border-top-color .

Voyons un exemple CSS border-top-color où la valeur est une couleur nommée:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div {
      padding: 10px;
      width: 50%;
      border: solid #666; 
      border-top-color: darkred;
      }
    </style>
  </head>
  <body>
    <div>La propriété border-top-color avec la valeur qui est une couleur nommée.</div>
  </body>
</html>

Voyons un exemple, où on a défini la couleur hexadecimale pour la propriété border-top-color :

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div {
      padding: 10px;
      width: 50%;
      border: solid #666; 
      border-top-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <div> La propriété border-top-color avec une valeur hexadecimale.</div>
  </body>
</html>

Maintenant considérons un exemple avec la propriété border-top-color en utilisant une valeur RGB :

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div {
      padding: 10px;
      width: 50%;
      border: solid #666; 
      border-top-color: rgb(142, 191, 66);
      }
    </style>
  </head>
  <body>
    <div>La propriété border-top-color avec une valeur RGB.</div>
  </body>
</html>

Voyons un exemple de la propriété border-top-color en utilisant une valeur HSL :

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div {
      padding: 10px;
      width: 50%;
      border: solid #666; 
      border-top-color: hsl(24, 80%, 50%);
      }
    </style>
  </head>
  <body>
    <div>La propriété order-top-color avec une valeur HSL.</div>
  </body>
</html>

Valeurs

Valeur Description
color Définit la couleur de la bordure supérieure. La couleur par défaut est la couleur de l'élément actuel. Les noms des couleurs, les codes hexadecimaux des couleurs, rgb(), rgba(), hsl(), hsla() peuvent être utilisés.
Valeur requise.
transparent Applique une couleur transparent à une bordure supérieure. La bordure supérieure occupera l'espace définie par la valeur border-width .
initial Définit la valeur initiale.
inherit Hérite la propriété de l'élément parent.

Support de Navigateurs

1+ 1+ 1+ 3.5+


Trouvez-vous cela utile?

Articles Associées