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>

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>

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.

Support de Navigateurs

1+ 1+ 1+ 9.2+


Trouvez-vous cela utile?

Articles Associées