Propriété CSS border-top

La propriété CSS border-top définit la largeur, le style et la couleur de la bordure supérieure d'un élément en une seule déclaration. C'est un raccourci qui combine trois propriétés longues : border-top-width, border-top-style et border-top-color.

Cette page couvre la syntaxe de la propriété, la signification de chaque valeur, la résolution des valeurs omises, ainsi que des exemples pratiques que vous pouvez exécuter.

Quand l'utiliser

Utilisez border-top lorsque vous souhaitez une bordure uniquement sur le bord supérieur d'un élément — par exemple, un séparateur au-dessus d'un pied de page, une ligne d'accent en haut d'une carte, ou un trait entre des éléments de liste empilés. Si vous avez besoin de la même bordure sur les quatre côtés, utilisez le raccourci border à la place ; pour un contrôle complet côté par côté, utilisez border-top, border-right, border-bottom et border-left ensemble.

Spécifier les valeurs

Les trois valeurs peuvent être indiquées dans n'importe quel ordre, et vous pouvez en omettre une ou deux. Toute valeur omise revient à sa valeur initiale :

Le style est requis pour afficher une bordure. La valeur initiale de border-top-style est none, donc si vous omettez le style, aucune bordure n'est rendue — même si vous définissez une largeur et une couleur.
Si vous omettez la couleur, la bordure utilise la valeur color de l'élément (currentColor). Lorsque color n'est pas défini, il est hérité ou prend la valeur noire par défaut.
Si vous omettez la largeur, elle revient à medium (environ 3px dans la plupart des navigateurs).

Valeur initiale	medium none currentColor
S'applique à	Tous les éléments. S'applique également à ::first-letter.
Hérité	Non
Animatable	Oui. La couleur et la largeur de la bordure sont animables.
Version	CSS1
Syntaxe DOM	object.style.borderTop = "1px solid black";

Syntaxe

Syntaxe de la propriété CSS border-top

border-top: border-width border-style border-color | initial | inherit;

Exemple de la propriété border-top :

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

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        border-top: 3px solid #1c87c9;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Border-top example</h2>
    <div> This is a simple example for the border-top property.</div>
  </body>
</html>

Essayez vous-même »

Résultat

![Propriété CSS border-top](/uploads/media/default/0001/03/2f035228f6c0a9e922d16e119bd24dba1d27241b.png "CSS border-top Property" =420x)

Exemple de la propriété border-top appliquée à différents éléments :

Exemple de la propriété CSS border-top avec les valeurs dotted, solid et double

<!DOCTYPE html>
<html>
  <head>
    <style>
      h1,
      p,
      div {
        padding: 10px;
      }
      h1 {
        border-top: 5px solid #8ebf42;
      }
      p {
        border-top: 4px dotted #1c87c9;
      }
      div {
        border-top: thick double #666;
      }
    </style>
  </head>
  <body>
    <h1>A heading with a solid green top border</h1>
    <p>A heading with a dotted blue top border.</p>
    <div>A div element with a thick double top border.</div>
  </body>
</html>

Essayez vous-même »

Vous pouvez créer une boîte avec l'élément <div> et définir une background-color pour votre boîte ainsi que la bordure supérieure.

Exemple d'utilisation de la propriété border-top pour créer une boîte avec une bordure ridge :

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

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        border-top: 20px ridge #8ebf42;
        background-color: #ccc;
        height: 100px;
        width: 200px;
        font-weight: bold;
        text-align: center;
        padding: 3px;
      }
    </style>
  </head>
  <body>
    <div>
      <p>This box has a ridge border on the top.</p>
    </div>
  </body>
</html>

Essayez vous-même »

Pièges courants

Rien ne s'affiche ? L'erreur la plus fréquente est d'omettre le style. border-top: 2px #1c87c9; ne rend rien car le style prend par défaut la valeur none. Ajoutez un mot-clé de style tel que solid : border-top: 2px solid #1c87c9;.
Les bordures s'ajoutent à la taille de l'élément. Une bordure supérieure augmente la hauteur rendue sauf si box-sizing est défini à border-box. Gardez cela à l'esprit lorsque vous alignez des éléments avec et sans bordure.
Mots-clés de longueur pour la largeur. En plus des longueurs explicites comme 3px, la largeur accepte les mots-clés thin, medium et thick. Leurs valeurs exactes en pixels sont définies par le navigateur.

Valeurs

border-top ne prend pas directement de valeurs nommées pour les parties de la bordure — il accepte les valeurs de ses trois propriétés longues, ainsi que les mots-clés globaux initial et inherit :

Valeur	Description
border-top-width	Définit la largeur de la bordure supérieure d'un élément. La valeur par défaut est "medium". Valeur obligatoire.
border-top-style	Définit le style de ligne de la bordure supérieure d'un élément. La valeur par défaut est "none". Valeur obligatoire.
border-top-color	Définit la couleur de la bordure supérieure d'un élément. La valeur par défaut est la couleur actuelle du texte.
initial	Définit la propriété à sa valeur par défaut.
inherit	Hérite la propriété de son élément parent.

Pratique

Quelle est la syntaxe correcte pour définir la propriété CSS 'border-top' ?

border-top: 10px solid red;border.top: 10px solid red;borderTop: 10px solid red;border-top = 10px solid red;