<hr>

<hr> represents a thematic break, such as a change of scene or topic. It is usually drawn as a line, but its meaning is a separator, not merely decoration.

A change of scene

The rule separates two parts of a short narrative. Removing the CSS changes how the break looks, not why it is present.

<h1>A day in the garden</h1>
<p>In the morning, the seedlings went into fresh soil.</p>
<hr />
<p>By evening, the first rain had arrived.</p>

hr {
  border: 0;
  border-top: 2px solid #94a3b8;
  margin: 1.5rem 0;
}

Placement and meaning

<hr> is void: it has no content or end tag. It belongs where flow content is allowed, with a specialized use as a separator in select menus. It cannot be put inside a paragraph’s phrasing content.

Its native accessibility role is separator. For a purely visual line under a heading or around a card, style a border on that existing element rather than adding a thematic break that does not exist in the content.

Adapt the appearance

Change the example’s border-top to 1px dashed #64748b. Do not use obsolete size, width, or noshade attributes. A line by itself does not replace descriptive headings that help readers navigate the document.

Sources and browser support

MDN: hr describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.