Propriété CSS border-top-style

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

La propriété border-top-style est spécifiée en tant qu'un seul mot-clé choisi parmi ceux disponibles pour la propriété border-style. La propriété border-style est utilisée pour définir le style de tous les côtés d'un élément , mais la propriété border-top-style ne définit un style que pour la bordure supérieure.

La largeur de la bordure supérieure est moyenne. Elle peut être changée en utilisant la propriété border-top-width ou border-width.

Les navigateurs rendent les styles différement. Chrome, par exemple, couramment rend les points comme les points réctangulaires, et pas cerclés.

La spécification ne spécifie pas le nombre d'espacement entre les points et les tirets.

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

valeur par défaut	none
Appliquée à	Tous les éléments. Elle est aussi appliquée à pseudo-élément ::first-letter.
Héritée	Non
Animable	Non
Version	CSS1
Syntaxe DOM	object.style.borderTopStyle = "dashed";

Syntaxe

border-top-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <style>
      h2, p {
      padding: 15px;
      border: solid #666; 
      }    
      h2 {
      border-top-style: dashed;
      }
      p {
      border-top-style: dotted;
      }
    </style>
  </head>
  <body>
    <h2>Un titre avec border-top-style de tirets.</h2>
    <p>Un paragraphe avec border-top-style pointillé.</p>
  </body>
</html>

Essayez-vous-même!

Voyons un exemple, où tous les valeurs de style sont utilisées en ordre pour voir la différence entre elles:

En fonction de la valeur de la propriété border-color, les effets des valeurs "groove", "ridge", "inset" et "outset" peuvent être changés.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      body {
      background: #1c87c9;
      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;
      background-color: #c9c5c5;
      border: 10px solid;
      }
      .flex-center {
      display: flex;
      justify-content: center;
      }
      /* border-top-style example classes */
      .b1 { border-top-style: hidden; }
      .b2 {border-top-style: dotted;}
      .b3 {border-top-style: dashed;}
      .b4 {border-top-style: solid;}
      .b5 {border-top-style: double;}
      .b6 {border-top-style: groove;}
      .b7 {border-top-style: ridge;}
      .b8 {border-top-style: inset;}
      .b9 {border-top-style: outset;}
    </style>
  </head>
  <body>
    <h2>Exemple des valeurs de border-top-style</h2>
    <main class="flex-center">
      <div class="b1">
        hidden
      </div>
      <div  class="b2">
        dotted
      </div>
      <div  class="b3">
        dashed
      </div>
    </main>
    <main class="flex-center">
      <div  class="b4">
        solid
      </div>
      <div class="b5">
        double
      </div>
      <div class="b6">
        groove
      </div>
    </main>
    <main class="flex-center">
      <div class="b7">
        ridge
      </div>
      <div class="b8">
        inset
      </div>
      <div class="b9">
        outset
      </div>
    </main>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
none	Définit qu'il n'y a aucune bordure. Valeur par défaut.
hidden	C'est le même que "none" à l'exception de la résolution du conflict de bordure pour les élément de table.
dotted	Définit une bordure pointillé.
dashed	Définit une bordure de tirets.
double	Définit une double bordure.
solid	Définit une bordure solide.
groove	Définit une 3D bordure rainurée. Son effet peut être changé avec la valeur de border-color.
ridge	Définit une 3D bordure striée. Son effet peut être changé avec la valeur de border-color.
inset	Définit une 3D bordure de médaillon. Son effet peut être changé avec la valeur de border-color.
outset	Définit une 3D bordure de départ. Son effet peut être changé avec la valeur de border-color.
initial	Définit la valeur initiale.
inherit	Hérite la propriété de l'élément parent.