The HTML hr tag marks a thematic break between parts of a document. It tells browsers and assistive technologies that the subject, scene, section, or topic has changed; it is not simply a generic decorative line.

Use an hr element in HTML when the separation has meaning. Use CSS borders on another element when you only need a visual edge around a card, panel, or layout region.

What does the HTML hr tag represent?

The hr element represents a transition within a page. Common uses include separating chapters, dividing sections of an article, or marking a change in topic. Its meaning comes from the document structure, not from its default appearance as a horizontal rule.

Do not insert an hr after every paragraph or use it as a replacement for all decorative dividers. If removing the line would remove no meaningful separation, a border or background on an existing container is usually the better choice.

How do you write an hr element in HTML?

The element is void, so it has no closing tag. Write it as <hr> wherever the thematic break belongs in the content flow.

HTML: <p>The first chapter ends here.</p> <hr> <p>The next chapter begins here.</p>

Place the element between the related content blocks, rather than at the beginning or end of an unrelated container. Browsers supply default styling, but that appearance varies by browser and may not match the design.

How do you control hr width in CSS, height, borders, color, and backgrounds?

Set the width, remove the browser’s default border, and create a controlled top border for a crisp line:

Border-based: hr { width: 60%; border: 0; border-top: 2px solid #6b7280; }

A percentage width is calculated against the containing block’s content width, not the viewport. If the containing block is 800px wide, a 60% rule produces a line that is normally 480px wide. A fixed value such as width: 20rem provides a more consistent measure when the design requires one.

For a background-based treatment, give the element a height and remove its border:

Background-based: hr { width: 60%; height: 4px; border: 0; background-color: #2563eb; }

Use a border when the line should behave like a narrow stroke. Use a background when you need a thicker bar or plan to add effects such as a gradient. The color property alone may not change a browser’s default rule consistently, so set border-color, border-top, or background-color explicitly.

How do you control alignment and spacing around an hr?

Center a narrower rule with automatic inline margins and control its surrounding whitespace with the margin shorthand:

Centered and spaced: hr { width: 60%; margin: 2rem auto; border: 0; border-top: 2px solid #d1d5db; }

Here, 2rem adds space above and below the thematic break, while auto divides the remaining horizontal space evenly. For separate control, use margin-block: 2rem and margin-inline: auto. Keep the spacing on the rule instead of adding empty paragraphs, so the document retains a clear content structure.