Propriété CSS border-top-style

La propriété CSS border-top-style définit le style de ligne de la bordure supérieure d'un élément — qu'elle soit dessinée en trait plein, en tirets, en rainure 3D, etc.

Elle accepte un mot-clé unique choisi parmi le même ensemble de valeurs disponibles pour le raccourci border-style. La différence réside dans la portée : border-style définit le style des quatre côtés à la fois, tandis que border-top-style ne cible que le bord supérieur. Les propriétés équivalentes pour les autres côtés sont border-right-style, border-bottom-style et border-left-style.

Quand l'utiliser

Utilisez border-top-style lorsque vous souhaitez qu'un côté ait un aspect différent des autres — par exemple, un séparateur en pointillés au-dessus d'un pied de page, une ligne en tirets au-dessus d'un bloc « lire la suite », ou un simple trait plein en haut d'une carte tandis que les autres côtés restent sans bordure. Si vous avez besoin du même style sur tous les côtés, le raccourci border-style est plus concis.

Une bordure n'est dessinée que lorsque son style est défini. Par défaut, border-top-style vaut none, donc même si vous définissez une couleur ou une largeur pour le bord supérieur, rien ne s'affiche tant que vous n'attribuez pas un style à ce côté. La largeur par défaut d'une bordure supérieure visible est medium ; modifiez-la avec border-top-width ou le raccourci border-width, et définissez sa couleur avec border-color.

Le rendu n'est pas identique au pixel près selon les navigateurs. Par exemple, Chrome dessine les bordures dotted sous forme de petits carrés plutôt que de points ronds, et l'espacement des points et des tirets est laissé à chaque moteur.

Info

La spécification ne précise pas l'espacement entre les points et les tirets.

Info

La spécification ne définit pas la manière dont les bordures de styles différents se rejoignent dans les coins.

Valeur par défaut	none
S'applique à	Tous les éléments. S'applique également à ::first-letter.
Héritage	Non
Animable	Non
Version	CSS1
Syntaxe DOM	object.style.borderTopStyle = "dashed";

Syntaxe

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

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

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

Exemple de la propriété CSS border-top-style avec les valeurs dashed et dotted

<!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>A Heading with dashed border-top-style.</h2>
    <p>A paragraph with dotted border-top-style.</p>
  </body>
</html>

Essayez vous-même »

Info

Selon la valeur de border-color, les effets des valeurs groove, ridge, inset et outset peuvent varier.

Résultat

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

Exemple de la propriété CSS border-top-style avec les valeurs hidden, dotted, dashed, solid, double, groove, ridge, inset et outset

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the 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>
    <h1>Border-top-style value examples</h1>
    <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 »

Info

Les valeurs groove, ridge, inset et outset créent un faux effet 3D en éclaircissant et en assombrissant la border-color. Sur un fond solid ou de couleur unie, elles peuvent paraître presque plates — l'effet est le plus visible avec une couleur de tonalité moyenne et une bordure d'au moins quelques pixels d'épaisseur.

Valeurs

Valeur	Description	Essayer
none	Définit qu'il n'y aura aucune bordure. Valeur par défaut.	Essayer »
hidden	Identique à « none », sauf lors de la résolution des conflits de bordure pour les éléments de tableau.	Essayer »
dotted	Définit une bordure en pointillés.	Essayer »
dashed	Définit une bordure en tirets.	Essayer »
double	Définit une bordure double.	Essayer »
solid	Définit une bordure pleine.	Essayer »
groove	Définit une bordure rainurée 3D. Son effet peut être modifié par la valeur de border-color.	Essayer »
ridge	Définit une bordure en relief 3D. Son effet peut être modifié par la valeur de border-color.	Essayer »
inset	Définit une bordure en creux 3D. Son effet peut être modifié par la valeur de border-color.	Essayer »
outset	Définit une bordure en saillie 3D. Son effet peut être modifié par la valeur de border-color.	Essayer »
initial	Définit la propriété à sa valeur par défaut.	Essayer »
inherit	Hérite de la propriété depuis son élément parent.

Propriétés associées

border-style — définir le style des quatre côtés à la fois.
border-top — raccourci pour la largeur, le style et la couleur de la bordure supérieure.
border-top-width — contrôler l'épaisseur de la bordure supérieure.
border-color — définir la couleur dans laquelle le style est dessiné.
border-right-style, border-bottom-style, border-left-style — les propriétés équivalentes pour chaque côté.

Pratique

Lesquelles des options suivantes sont des valeurs valides pour la propriété 'border-top-style' en CSS ?