Propriété CSS border-top-width

La propriété border-top-width est utilisée pour définir la largeur de la bordure supérieure d'un élément.

La largeur de la bordure supérieure, aussi que des autres côtés, peut aussi être définie par les propriétés raccourcies border ou border-width.

Pour définir border-top-width, vous devez premièrement définir la propriété border-style, car vous avez besoin des bordures avant de définir leur largeur. Vous pouvez utiliser les propriétés border-top-style ou border-style pour spécifier le style de la bordure.

La spécification ne définit pas l'épaisseur exacte de chaque mot-clé. De toute façon, ils suivent toujours à cet ordre: mince ≤ medium ≤ épais.

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

Valeur initiale	medium
Appliqué à	Tous les éléments. Elle est aussi appliquée à pseudo-élément ::first-letter.
Héritée	Non
Animable	Oui. La largeur de la bordure est animable.
Version	CSS1
Syntaxe DOM	object.style.borderTopWidth = "5px";

Syntaxe

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

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      p {
      padding: 8px;             
      border-style: dotted;
      border-top-width: thick;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de border-top-width</h2>
    <p>Comme vous le voyez, la largeur de la bordure supérieure est définie thick.</p>
  </body>
</html>

Essayez-vous-même!

Voyons un exemple avec l'utilisation des toutes les valeurs de la propriété:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du 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>
    <h2>Exemples des valeurs border-top-width</h2>
    <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 lenght
      </div>
      <div class="b5">
        initial
      </div>
      <div class="b6">
        inherit
      </div>
    </main>
    </div>
    </main>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Descriptions
medium	Définit une bordure supérieure moyenne. Valeur par défaut.
thin	Définit une bordure supérieure mince. Il appartient à l'argent utilisateur de déterminer la largeur exacte.
thick	Définit une bordure supérieure épaise. Il appartient à l'argent utilisateur de déterminer la largeur exacte.
length	Définit l'épaisseur de la bordure. Par exemple, 10px, 5em, 8pt, etc.
initial	Définit la valeur initiale.
inherit	Hérite la propriété d'élément parent.