Ausführbare HTML-Docs: Horizontale Linie

Q: Wie füge ich in HTML eine horizontale Linie ein?

Nimm das -Tag in einer eigenen Zeile. Es ist ein Void-Element ohne schließendes Tag und zeichnet eine Linie über die volle Breite seines Containers.

Q: Wie ändere ich die Farbe eines hr?

Entferne den Standardrahmen und zeichne deinen eigenen: hr { border: none; border-top: 2px solid #2563eb; }. Nur color zu setzen ändert sie auch, aber durch den Standardstil inset bleibt sie schattiert und zweifarbig.

Q: Wie mache ich ein hr dicker?

Setz die Rahmenbreite: hr { border: none; border-top: 4px solid #111827; }. Das Attribut size aus alten Tutorials funktioniert in Browsern noch, ist aber obsolet, nimm also CSS.

HTML horizontale Linie: das hr-Tag und wie du es stylst

Eine horizontale Linie zeichnest du in HTML mit dem <hr>-Tag. Hier lernst du, was es bedeutet, wie du Farbe, Dicke, Breite und Stil mit CSS änderst, wie du eine Trennlinie mit Text in der Mitte baust und wie du eine vertikale Linie machst.

Diese Seite enthält ausführbare Editoren - bearbeiten, ausführen und Ausgabe sofort sehen.

Von Kevin Spektor, Co-founder & CTO

Veröffentlicht am Sep 24, 2026

So fügst du eine horizontale Linie ein

Setz <hr> zwischen zwei Inhaltsblöcke. Es hat kein schließendes Tag:

<!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>

Standardmäßig zieht sich die Linie über die volle Breite ihres Containers, hat einen kleinen Außenabstand darüber und darunter und wird als dünner grauer inset-Rahmen gezeichnet (eine helle und eine dunkle Kante).

<hr> steht für horizontal rule. In HTML bedeutet es einen thematischen Umbruch: einen Themen- oder Szenenwechsel innerhalb eines Abschnitts. Screenreader sagen es als Trenner an. Wenn du nur eine dekorative Linie willst (unter einer Überschrift, um eine Karte), zeichne sie stattdessen mit einem CSS-Rahmen an diesem Element.

Ein hr mit CSS stylen

Das Standardaussehen kommt von Rahmen, der zuverlässige Weg, ein <hr> zu stylen, ist also, sie zu entfernen und selbst einen Rahmen zu zeichnen:

<!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>

Um zu ändern	Nimm
Farbe	`border-top: 2px solid #2563eb` (nach `border: none`)
Dicke	Die Breite in diesem Rahmen, etwa `6px`
Stil	`solid`, `dashed`, `dotted`, `double`
Länge	`width: 40%`, dazu `margin-inline: auto` zum Zentrieren
Abgerundete Enden	`height` + `background` + `border-radius` statt eines Rahmens
Abstand drumherum	`margin`

Nur color: blue an einem hr zu setzen ändert die Linie in aktuellen Browsern zwar, aber der Standardstil inset schattiert sie, und sie behält eine Höhe von 2px. Wenn du den Rahmen zurücksetzt, bekommst du genau das, was du angibst.

Alte hr-Attribute

Alter Code verwendet Attribute direkt am Tag:

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

size, width, color, noshade und align sind obsolet. Browser wenden sie noch an, damit alte Seiten richtig aussehen, aber sie sind ungültiges HTML und später schwerer zu ändern. Ersetze sie durch das CSS oben.

Eine Trennlinie mit Text in der Mitte

Die „oder“-Linie zwischen zwei Anmelde-Buttons ist kein <hr> (ein hr kann keinen Text enthalten). Sie ist eine Flex-Reihe mit einer Linie auf jeder Seite des Wortes:

<!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>

Die beiden Teile ::before und ::after nehmen mit flex: 1 jeweils die Hälfte des freien Platzes ein und zeichnen einen oberen Rahmen. Ändere or in ein längeres Wort, und die Linien schrumpfen passend.

Vertikale Linien

Eine vertikale Version von <hr> gibt es nicht. Zeichne eine vertikale Linie mit einem Rahmen auf einer Seite eines Elements oder mit einem schmalen Element in einer Flex-Reihe:

<!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 setzt die Linie an den Anfang des Textes, der im Deutschen links und im Arabischen oder Hebräischen rechts liegt, das Layout funktioniert also in beiden Richtungen.

Häufige Fehler

</hr> schreiben. <hr> ist ein Void-Element. <hr> oder <hr /> ist alles, was du brauchst.
<hr> zur Dekoration verwenden. Screenreader sagen jedes an. Eine Linie, die nur optisch ist, gehört ins CSS.
Nur mit color stylen. Setz den Rahmen mit border: none zurück und setz border-top.
Linien mit <br> oder Unterstrichen zeichnen. Nimm <hr> oder einen Rahmen. Wofür <br> gedacht ist, steht auf der Seite zum Zeilenumbruch.
Obsolete Attribute verwenden. Verschieb size, width, color und noshade ins CSS.

Häufig gestellte Fragen

Wie füge ich in HTML eine horizontale Linie ein?

Nimm das <hr>-Tag in einer eigenen Zeile. Es ist ein Void-Element ohne schließendes Tag und zeichnet eine Linie über die volle Breite seines Containers.

Wie ändere ich die Farbe eines hr?

Entferne den Standardrahmen und zeichne deinen eigenen: hr { border: none; border-top: 2px solid #2563eb; }. Nur color zu setzen ändert sie auch, aber durch den Standardstil inset bleibt sie schattiert und zweifarbig.

Wie mache ich ein hr dicker?

Setz die Rahmenbreite: hr { border: none; border-top: 4px solid #111827; }. Das Attribut size aus alten Tutorials funktioniert in Browsern noch, ist aber obsolet, nimm also CSS.

Wofür steht hr?

Horizontal rule, also horizontale Linie. Im aktuellen HTML bedeutet es einen thematischen Umbruch: einen Themen- oder Szenenwechsel zwischen Absätzen. Screenreader sagen es als Trenner an.

Wie mache ich eine vertikale Linie in HTML?

HTML hat kein Tag für eine vertikale Linie. Gib einem Element einen Rahmen auf einer Seite, etwa border-inline-start: 2px solid #e5e7eb, oder nimm ein schmales Element mit Hintergrundfarbe in einer Flex-Reihe.

Verwandte Konzepte