Dokumentacja HTML z przykładami: Linia pozioma

Q: Jak dodać linię poziomą w HTML?

Użyj znacznika w osobnej linii. To element pusty bez znacznika zamykającego, który rysuje linię na całą szerokość swojego kontenera.

Q: Jak zmienić kolor hr?

Usuń domyślne obramowanie i narysuj własne: hr { border: none; border-top: 2px solid #2563eb; }. Samo ustawienie color też go zmienia, ale domyślny styl inset zostawia cieniowanie w dwóch odcieniach.

Q: Jak pogrubić hr?

Ustaw szerokość obramowania: hr { border: none; border-top: 4px solid #111827; }. Atrybut size ze starych poradników nadal działa w przeglądarkach, ale jest przestarzały, więc używaj CSS.

Linia pozioma w HTML: znacznik hr i jego stylowanie

Linię poziomą w HTML narysujesz znacznikiem <hr>. Dowiedz się, co oznacza, jak zmienić jej kolor, grubość, szerokość i styl w CSS, jak zbudować separator z tekstem pośrodku i jak zrobić linię pionową.

Na tej stronie są działające edytory: edytuj, uruchamiaj i od razu zobacz wynik.

Autor: Kevin Spektor, Współzałożyciel i CTO

Opublikowano Sep 24, 2026

Jak dodać linię poziomą

Umieść <hr> między dwoma blokami treści. Nie ma znacznika zamykającego:

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

Domyślnie linia ma całą szerokość kontenera, mały margines nad i pod sobą i jest rysowana jako cienkie szare obramowanie inset (jasna i ciemna krawędź).

<hr> to skrót od horizontal rule, czyli linia pozioma. W HTML oznacza przerwę tematyczną: zmianę tematu lub sceny w obrębie sekcji. Czytniki ekranu ogłaszają ją jako separator. Jeśli chcesz tylko dekoracyjnej linii (pod nagłówkiem, wokół karty), narysuj ją zamiast tego obramowaniem CSS na tym elemencie.

Stylowanie hr w CSS

Domyślny wygląd pochodzi z obramowań, więc niezawodny sposób na stylizowanie <hr> to usunięcie ich i narysowanie jednego obramowania samodzielnie:

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

Co zmienić	Czego użyć
Kolor	`border-top: 2px solid #2563eb` (po `border: none`)
Grubość	Szerokość w tym obramowaniu, np. `6px`
Styl	`solid`, `dashed`, `dotted`, `double`
Długość	`width: 40%` plus `margin-inline: auto`, żeby ją wyśrodkować
Zaokrąglone końce	`height` + `background` + `border-radius` zamiast obramowania
Odstęp wokół	`margin`

Samo ustawienie color: blue na hr zmienia linię w obecnych przeglądarkach, ale domyślny styl inset ją cieniuje, a ona zachowuje wysokość 2px. Zresetowanie obramowania daje dokładnie to, o co prosisz.

Stare atrybuty hr

Stary kod używa atrybutów na samym znaczniku:

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

size, width, color, noshade i align są przestarzałe. Przeglądarki nadal je stosują, żeby stare strony dobrze wyglądały, ale to niepoprawny HTML, który trudniej potem zmienić. Zastąp je powyższym CSS.

Separator z tekstem pośrodku

Linia "lub" między dwoma przyciskami logowania to nie <hr> (hr nie może zawierać tekstu). To rząd flex z linią narysowaną po obu stronach słowa:

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

Dwa elementy ::before i ::after zajmują po połowie wolnego miejsca dzięki flex: 1 i rysują górne obramowanie. Zmień or na dłuższe słowo, a linie skrócą się, żeby się zmieścić.

Linie pionowe

Nie ma pionowej wersji <hr>. Linię pionową narysujesz obramowaniem z jednej strony elementu albo cienkim elementem w rzędzie 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 umieszcza linię na początku tekstu, czyli po lewej w polskim i po prawej w arabskim czy hebrajskim, więc układ działa w obu kierunkach.

Częste błędy

Pisanie </hr>. <hr> to element pusty. Wystarczy <hr> lub <hr />.
Używanie <hr> do dekoracji. Czytniki ekranu ogłaszają każdy. Linia czysto wizualna należy do CSS.
Stylowanie samym color. Zresetuj obramowanie przez border: none i ustaw border-top.
Rysowanie linii przez <br> lub podkreślniki. Użyj <hr> lub obramowania. Do czego służy <br>, opisuje strona o łamaniu linii.
Przestarzałe atrybuty. Przenieś size, width, color i noshade do CSS.

Najczęściej zadawane pytania

Jak dodać linię poziomą w HTML?

Użyj znacznika <hr> w osobnej linii. To element pusty bez znacznika zamykającego, który rysuje linię na całą szerokość swojego kontenera.

Jak zmienić kolor hr?

Usuń domyślne obramowanie i narysuj własne: hr { border: none; border-top: 2px solid #2563eb; }. Samo ustawienie color też go zmienia, ale domyślny styl inset zostawia cieniowanie w dwóch odcieniach.

Jak pogrubić hr?

Ustaw szerokość obramowania: hr { border: none; border-top: 4px solid #111827; }. Atrybut size ze starych poradników nadal działa w przeglądarkach, ale jest przestarzały, więc używaj CSS.

Co oznacza skrót hr?

Horizontal rule, czyli linia pozioma. W obecnym HTML oznacza przerwę tematyczną: zmianę tematu lub sceny między akapitami. Czytniki ekranu ogłaszają ją jako separator.

Jak zrobić linię pionową w HTML?

HTML nie ma znacznika linii pionowej. Dodaj obramowanie z jednej strony elementu, np. border-inline-start: 2px solid #e5e7eb, albo użyj wąskiego elementu z kolorem tła w rzędzie flex.

Powiązane zagadnienia