Docs HTML exécutables : Ligne horizontale

Q: Comment ajouter une ligne horizontale en HTML ?

Utilisez la balise sur sa propre ligne. C'est un élément vide sans balise fermante, et il trace une ligne sur toute la largeur de son conteneur.

Q: Comment changer la couleur d'un hr ?

Retirez la bordure par défaut et tracez la vôtre : hr { border: none; border-top: 2px solid #2563eb; }. Définir seulement color la change aussi, mais le style inset par défaut la garde ombrée et bicolore.

Q: Comment rendre un hr plus épais ?

Définissez la largeur de la bordure : hr { border: none; border-top: 4px solid #111827; }. L'attribut size des vieux tutoriels fonctionne encore dans les navigateurs mais il est obsolète, alors utilisez le CSS.

Ligne horizontale en HTML : la balise hr et son style

Tracez une ligne horizontale en HTML avec la balise <hr>. Découvrez ce qu'elle signifie, comment changer sa couleur, son épaisseur, sa largeur et son style en CSS, comment créer un séparateur avec du texte au milieu et comment faire une ligne verticale.

Cette page contient des éditeurs exécutables - modifiez, exécutez et voyez la sortie instantanément.

Par Kevin Spektor, Co-founder & CTO

Publié le Sep 24, 2026

Comment ajouter une ligne horizontale

Placez <hr> entre deux blocs de contenu. Il n'a pas de balise fermante :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>hr</title>
  <style>
    body { font-family: system-ui, sans-serif; }
  </style>
</head>
<body>
  <p>The end of the first part of the story.</p>
  <hr>
  <p>Three weeks later, a new part begins.</p>
</body>
</html>

Par défaut, la ligne occupe toute la largeur de son conteneur, a une petite marge au-dessus et en dessous, et s'affiche comme une fine bordure grise en relief inset (un bord clair et un bord foncé).

<hr> signifie horizontal rule. En HTML, il désigne une rupture thématique : un changement de sujet ou de scène à l'intérieur d'une section. Les lecteurs d'écran l'annoncent comme un séparateur. Si vous voulez seulement une ligne décorative (sous un titre, autour d'une carte), tracez-la plutôt avec une bordure CSS sur cet élément.

Styliser un hr en CSS

L'apparence par défaut vient des bordures, donc la façon fiable de styliser un <hr> est de les supprimer et de tracer vous-même une seule bordure :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>hr styles</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    hr { margin: 20px 0; }
    .blue { border: none; border-top: 2px solid #2563eb; }
    .thick { border: none; border-top: 6px solid #111827; }
    .dashed { border: none; border-top: 2px dashed #f59e0b; }
    .dotted { border: none; border-top: 3px dotted #16a34a; }
    .short { border: none; border-top: 2px solid #9ca3af; width: 40%; margin-inline: auto; }
    .round { border: none; height: 6px; background: #2563eb; border-radius: 3px; }
  </style>
</head>
<body>
  <hr>
  <hr class="blue">
  <hr class="thick">
  <hr class="dashed">
  <hr class="dotted">
  <hr class="short">
  <hr class="round">
</body>
</html>

Pour changer	Utilisez
La couleur	`border-top: 2px solid #2563eb` (après `border: none`)
L'épaisseur	La largeur dans cette bordure, comme `6px`
Le style	`solid`, `dashed`, `dotted`, `double`
La longueur	`width: 40%`, plus `margin-inline: auto` pour la centrer
Des extrémités arrondies	`height` + `background` + `border-radius` au lieu d'une bordure
L'espace autour	`margin`

Définir seulement color: blue sur un hr change bien la ligne dans les navigateurs actuels, mais le style inset par défaut l'ombre et elle garde une hauteur de 2px. Réinitialiser la bordure vous donne exactement ce que vous demandez.

Les anciens attributs de hr

Du vieux code utilise des attributs sur la balise elle-même :

<hr size="4" width="50%" color="red" noshade align="left">

size, width, color, noshade et align sont obsolètes. Les navigateurs les appliquent encore pour que les anciennes pages s'affichent bien, mais c'est du HTML invalide, plus difficile à modifier ensuite. Remplacez-les par le CSS ci-dessus.

Un séparateur avec du texte au milieu

La ligne « ou » entre deux boutons de connexion n'est pas un <hr> (un hr ne peut pas contenir de texte). C'est une rangée flex avec une ligne tracée de chaque côté du mot :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Divider with text</title>
  <style>
    body { font-family: system-ui, sans-serif; max-width: 320px; }
    .divider { display: flex; align-items: center; gap: 12px; color: #6b7280; font-size: 14px; }
    .divider::before, .divider::after { content: ""; flex: 1; border-top: 1px solid #d1d5db; }
    button { width: 100%; padding: 10px; }
  </style>
</head>
<body>
  <button type="button">Continue with email</button>
  <p class="divider">or</p>
  <button type="button">Continue with a passkey</button>
</body>
</html>

Les deux morceaux ::before et ::after prennent chacun la moitié de l'espace libre avec flex: 1 et tracent une bordure supérieure. Remplacez or par un mot plus long et les lignes se raccourcissent pour s'adapter.

Lignes verticales

Il n'existe pas de version verticale de <hr>. Tracez une ligne verticale avec une bordure sur un côté d'un élément, ou avec un élément fin dans une rangée flex :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Vertical line</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .quote { border-inline-start: 4px solid #2563eb; padding-inline-start: 12px; }
    .row { display: flex; align-items: center; gap: 16px; }
    .vr { width: 1px; align-self: stretch; background: #d1d5db; }
  </style>
</head>
<body>
  <p class="quote">A border on the start side makes a vertical line.</p>
  <div class="row">
    <span>Home</span>
    <span class="vr"></span>
    <span>Docs</span>
    <span class="vr"></span>
    <span>Blog</span>
  </div>
</body>
</html>

border-inline-start place la ligne au début du texte, c'est-à-dire à gauche en français et à droite en arabe ou en hébreu, donc la mise en page fonctionne dans les deux sens.

Erreurs fréquentes

Écrire </hr>. <hr> est un élément vide. <hr> ou <hr /> suffit.
Utiliser <hr> pour décorer. Les lecteurs d'écran annoncent chacun d'eux. Une ligne purement visuelle relève du CSS.
Styliser avec color seul. Réinitialisez la bordure avec border: none et définissez border-top.
Utiliser <br> ou des tirets bas pour tracer des lignes. Utilisez <hr> ou une bordure. Voir le retour à la ligne pour savoir à quoi sert <br>.
Utiliser des attributs obsolètes. Déplacez size, width, color et noshade dans le CSS.

Questions fréquentes

Comment ajouter une ligne horizontale en HTML ?

Utilisez la balise <hr> sur sa propre ligne. C'est un élément vide sans balise fermante, et il trace une ligne sur toute la largeur de son conteneur.

Comment changer la couleur d'un hr ?

Retirez la bordure par défaut et tracez la vôtre : hr { border: none; border-top: 2px solid #2563eb; }. Définir seulement color la change aussi, mais le style inset par défaut la garde ombrée et bicolore.

Comment rendre un hr plus épais ?

Définissez la largeur de la bordure : hr { border: none; border-top: 4px solid #111827; }. L'attribut size des vieux tutoriels fonctionne encore dans les navigateurs mais il est obsolète, alors utilisez le CSS.

Que signifie hr ?

Horizontal rule (filet horizontal). En HTML actuel, il désigne une rupture thématique : un changement de sujet ou de scène entre des paragraphes. Les lecteurs d'écran l'annoncent comme un séparateur.

Comment faire une ligne verticale en HTML ?

HTML n'a pas de balise de ligne verticale. Ajoutez une bordure sur un côté d'un élément, comme border-inline-start: 2px solid #e5e7eb, ou utilisez un élément étroit avec une couleur de fond dans une rangée flex.

Concepts liés