Is just a styling tool for drawing a line?

It can look like one, but semantically it marks a thematic break in content. For a purely decorative line with no semantic meaning, use a CSS border instead.

Can I style the line?

Yes — target it with CSS (border, height, background) like any other element. Browsers render a plain default line otherwise.

How do I change the color of an ?

Remove the default border and set your own: hr { border: none; border-top: 2px solid #7b61ff; }. Setting color alone doesn't work in every browser.

How do I make an thicker?

Increase the border width, for example border-top: 4px solid #333;, or set border: none; height: 4px; background: #333;.

Is a self-closing tag?

It's a void element, so it never has content or a closing tag. Both and are valid HTML.

What does "hr" stand for?

Horizontal rule. Since HTML5 it's officially called a "thematic break", because what matters is the meaning, not that the line is horizontal.

Can I make a vertical line with ?

Not really — is for breaks between blocks of content. For a vertical divider between columns, use a CSS border-left on one of the columns.

Why does my have a gap or a 3D look?

Browsers draw it with an inset border by default. Set border: none; and then add your own border-top or height and background to get a flat line.

<hr> Tag in HTML – Syntax, Attributes & Live Example

Quick facts

Category	Flow content
Content model	Empty — it’s a void element with no children
Tag omission	Void element — no end tag, ever
Permitted parents	Any element that accepts flow content
DOM interface	`HTMLHRElement`

Syntax

<hr>

Live example

Edit the code below and watch the preview update instantly.

index.html

Preview

Open in Full Editor →

Attributes

Attribute	Description
—	Presentational attributes like `size`, `width`, and `noshade` are deprecated — style the line with CSS instead. Only the global attributes apply.

Common examples

A change of topic

Use <hr> where the subject shifts but a new heading isn’t needed, like a scene break in a story.

<p>…and that was the end of the long journey.</p>
<hr>
<p>Three years later, a letter arrived.</p>

A subtle styled divider

Remove the default 3D border and draw a clean, thin line instead.

<style>
  hr {
    border: none;
    border-top: 1px solid #ddd;
    margin: 2rem 0;
  }
</style>

A decorative ornament

A pseudo-element can turn the line into centred stars, a classic book-style break.

<style>
  hr.stars { border: none; text-align: center; }
  hr.stars::after { content: "* * *"; letter-spacing: 1em; color: #999; }
</style>
<hr class="stars">

Separators in a select menu

Modern browsers allow <hr> inside <select> to separate groups of options.

<select>
  <option>Recent file 1</option>
  <option>Recent file 2</option>
  <hr>
  <option>Open…</option>
</select>

<hr> vs a CSS border

<hr> means “a thematic break” — the content after it is a new topic or scene. Screen readers announce it as a separator, so it carries meaning. A CSS border-bottom on a heading or section is purely visual and isn’t announced.

The rule: if the line marks a real change of topic, use <hr> and style it as you like. If the line is only decoration — under a heading, between cards, around a box — use CSS borders.

	<hr>	CSS border
Meaning	Thematic break	None (decoration)
Screen readers	Announced as a separator	Not announced
Best for	Topic or scene changes	Visual lines

Common mistakes to avoid

Using <hr> for spacing. Use CSS margin to add space between sections.
An <hr> before every heading. Headings already start a new section; adding a line before each one is redundant.
Old presentational attributes. size, width, noshade and color are obsolete; use CSS.
Writing </hr>. It’s a void element: write <hr> (or <hr />), never with a closing tag.

Accessibility & SEO tips

Give styled lines enough contrast to be seen, but don’t rely on them alone to separate topics — a heading is clearer.
For purely decorative lines, use CSS so screen reader users don’t hear meaningless “separator” announcements.
Search engines treat <hr> as a minor structural hint; headings matter far more for SEO.
In long articles, prefer a new heading over an <hr> when the new part has a clear topic — headings help readers and search engines more than lines do.

Browser support

Supported in every browser, including Chrome, Edge, Firefox, Safari and their mobile versions — it has been part of HTML since the very first versions. Using

inside