Propriété CSS border-top-width

La propriété CSS border-top-width définit la largeur (épaisseur) de la bordure supérieure d'un élément. Elle contrôle uniquement le bord supérieur, ce qui la rend utile lorsque vous souhaitez une bordure supérieure plus épaisse ou plus fine que les trois autres côtés — par exemple, une ligne d'accentuation épaisse au-dessus d'une carte ou d'une section.

Vous pouvez définir la largeur de la bordure supérieure de deux façons :

Directement, avec la propriété détaillée border-top-width, lorsque seul le bord supérieur diffère.
Dans une propriété raccourcie, en utilisant border ou border-width, lorsque vous souhaitez définir plusieurs côtés à la fois.

border-top-width n'a d'effet visible qu'une fois qu'un style de bordure est défini. Par défaut, le style de bordure est none, ce qui signifie qu'une bordure de n'importe quelle largeur ne s'affiche pas. Vous devez donc d'abord déclarer un style avec border-style ou border-top-style, et ce style ne doit être ni none ni hidden.

/* Without a style the width is ignored — nothing shows */
.box {
  border-top-width: thick; /* has no effect on its own */
}

/* Add a style and the width becomes visible */
.box {
  border-top-style: solid;
  border-top-width: thick;
}

Les propriétés détaillées homologues border-right-width, border-bottom-width et border-left-width fonctionnent de la même façon pour les autres bords.

Info

La spécification ne définit pas l'épaisseur exacte de chaque mot-clé. Cependant, ils respectent toujours l'ordre suivant : thin ≤ medium ≤ thick.

Info

La spécification ne définit pas comment les bordures de styles et de largeurs différents se rejoignent dans les coins.

Valeur initiale	medium
S'applique à	Tous les éléments. S'applique également à ::first-letter.
Hérité	Non
Animatable	Oui. La largeur de la bordure est animatable.
Version	CSS1
Syntaxe DOM	object.style.borderTopWidth = "5px";

Syntaxe

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

border-top-width: medium | thin | thick | length | initial | inherit;

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

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

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        padding: 8px;
        border-style: dotted;
        border-top-width: thick;
      }
    </style>
  </head>
  <body>
    <h2>Border-top-width example</h2>
    <p>As you can see the width of the top border is set to thick.</p>
  </body>
</html>

Essayez vous-même »

Résultat

![Propriété CSS border-top-width](https://api.w3docs.com/uploads/media/default/0001/03/ff5db94a745edc3bcb963c80df1284fa352d4278.png "border-top-width set to thick on a dotted paragraph" =420x)

Exemple de la propriété border-top-width avec toutes les valeurs :

Exemple de la propriété CSS border-top-width avec les valeurs medium, thin, thick, initial et inherit

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background: #ccc;
        font-size: 20px;
        text-align: center;
      }
      main div {
        display: flex;
        align-items: center;
        justify-content: center;
        color: black;
        padding-top: 30px;
        padding-bottom: 30px;
        width: 200px;
        height: 100px;
        margin: 15px;
        font-weight: bold;
        border: solid;
      }
      .flex-center {
        display: flex;
        justify-content: center;
      }
      /* border-top-width example classes */
      .b1 {
        border-top-width: medium;
      }
      .b2 {
        border-top-width: thin;
      }
      .b3 {
        border-top-width: thick;
      }
      .b4 {
        border-top-width: 10px;
      }
      .b5 {
        border-top-width: initial;
      }
      .b6 {
        border-top-width: inherit;
      }
    </style>
  </head>
  <body>
    <h1>Border-top-width value examples</h1>
    <main class="flex-center">
      <div class="b1">
        medium
      </div>
      <div class="b2">
        thin
      </div>
      <div class="b3">
        thick
      </div>
    </main>
    <main class="flex-center">
      <div class="b4">
        10px length
      </div>
      <div class="b5">
        initial
      </div>
      <div class="b6">
        inherit
      </div>
    </main>
  </body>
</html>

Essayez vous-même »

Valeurs

Valeur	Description	Tester
medium	Définit une bordure supérieure moyenne. C'est la valeur par défaut de cette propriété.	Tester »
thin	Définit une bordure supérieure fine. C'est à l'agent utilisateur de déterminer la largeur exacte.	Tester »
thick	Définit une bordure supérieure épaisse. C'est à l'agent utilisateur de déterminer la largeur exacte.	Tester »
length	Définit l'épaisseur de la bordure supérieure (par ex. 10px, 5em, 8pt). Les valeurs en pourcentage ne sont pas prises en charge.	Tester »
initial	Réinitialise la propriété à sa valeur par défaut.	Tester »
inherit	Hérite de la propriété de son élément parent.

Mots-clés et valeurs de longueur

Vous pouvez exprimer la largeur sous la forme de l'un des trois mots-clés (thin, medium, thick) ou comme une longueur explicite. Les mots-clés sont pratiques mais vagues : la spécification CSS ne fixe pas de taille en pixels exacte pour eux, seulement l'ordre thin ≤ medium ≤ thick. La plupart des navigateurs les affichent approximativement comme 1px, 3px et 5px, mais vous ne devriez pas vous y fier.

Utilisez une longueur explicite (1px, 0.25em, 3pt) chaque fois que vous avez besoin d'une épaisseur prévisible et cohérente entre les navigateurs. Notez que les pourcentages ne sont pas autorisés pour les largeurs de bordure, et les longueurs négatives sont invalides.

Points de vigilance

Pas de bordure visible sans style. L'erreur la plus courante est de définir uniquement la largeur en oubliant border-top-style. Avec le style par défaut none, la bordure ne s'affiche tout simplement pas.
initial vs inherit. initial réinitialise la largeur à sa valeur par défaut spécifiée (medium), tandis que inherit copie la largeur calculée de l'élément parent.
La largeur affecte la mise en page. Une bordure plus large s'ajoute à la taille rendue de l'élément, sauf si box-sizing est défini sur border-box, ce qui conserve la largeur/hauteur déclarée fixe en absorbant la bordure à l'intérieur.
Les coins. La spécification ne définit pas comment les bordures de largeurs ou de styles différents se rejoignent dans un coin, de sorte qu'une bordure supérieure épaisse rencontrant une bordure latérale fine peut sembler légèrement différente selon les navigateurs.

Entraînement

Pratique

Quelles sont les valeurs valides pour la propriété border-top-width en CSS ?