How to Add a Horizontal Line in HTML

The simplest way to add a line in HTML

A horizontal rule — a line that stretches across the page — is created with a single HTML tag: <hr>. This tag stands alone and needs no closing tag. Place it wherever you want the line to appear in your document.

The <hr> tag creates a visual break between sections of content. Browsers display it as a thin gray line by default, though you can change its appearance with CSS if you want it thicker, darker, or a different color.

Here is the most basic example:

<p>This is the first section.</p> <hr> <p>This is the second section.</p>

When you open this in a browser, you will see a line between the two paragraphs. That is all there is to the HTML part.

Key Takeaways

The <hr> tag creates a horizontal line and requires no closing tag or content inside it.
You can style the line's thickness, color, and style using CSS properties like border, height, and background-color.
The line respects margins and padding, so you can control space above and below it with CSS.
Use <hr> to separate major sections of content, not as a design element to fill empty space.

Changing the line's appearance with CSS

The default <hr> is plain, but CSS lets you control how it looks. The most common changes are making it thicker, changing its color, or removing the default border style.

Here is how to make the line thicker and darker:

<style> hr { border: none; height: 3px; background-color: #333; } </style>

Breaking this down: border: none removes the default border that browsers add. height: 3px makes the line 3 pixels tall (thicker). background-color: #333 makes it dark gray instead of the default light gray. You can change #333 to any color code you want — #000 is black, #ff0000 is red.

If you want a dashed or dotted line instead of solid, use border-top instead of background-color:

<style> hr { border: none; border-top: 2px dashed #666; } </style>

Controlling space around the line

By default, the <hr> tag has built-in margins that add space above and below it. If you want to adjust this spacing, use the CSS margin property.

Here is an example that removes most of the space:

<style> hr { margin: 10px 0; } </style>

The margin: 10px 0 means 10 pixels of space above and below the line, and 0 pixels on the left and right. You can change 10px to any value you want — 20px for more space, 5px for less.

If you want different spacing on top and bottom, write it out fully:

<style> hr { margin-top: 30px; margin-bottom: 15px; } </style>

Making the line narrower than the page width

Sometimes you want the line to not stretch all the way across. You can control this with the width property in CSS.

Here is how to make the line only 50 percent as wide as its container:

<style> hr { width: 50%; margin-left: auto; margin-right: auto; } </style>

The width: 50% makes the line half as wide. The margin-left: auto and margin-right: auto center it on the page. If you do not want it centered, remove those two lines and the line will start from the left edge instead.

You can use any width value: 80% for 80 percent of the page, 300px for exactly 300 pixels wide, or 200px for a short line.

Where to put the <hr> tag in your document

The <hr> tag goes in the <body> section of your HTML file, wherever you want the line to appear. It is usually placed between major sections of content — after a heading, between paragraphs, or before a new topic starts.

Here is a realistic example with multiple lines:

<body> <h1>My Website</h1> <p>Welcome to my site.</p> <hr> <h2>About Me</h2> <p>I write about web design.</p> <hr> <h2>Contact</h2> <p>Email me at example@example.com</p> </body>

Each <hr> creates a visual break between sections. The browser will display the lines exactly where you placed them in the code.

Common mistakes to avoid

The most common error is writing <hr></hr> with a closing tag. The <hr> tag does not need one — it is a self-closing tag. Writing the closing tag will not break anything, but it is unnecessary and not standard HTML.

Another mistake is using <hr> just to add space between elements. If you want space, use CSS margin or padding instead. The <hr> tag is meant to show a semantic break in content — a transition between topics or sections — not just to fill empty space.

Do not style the <hr> tag with inline styles if you have multiple lines on your page. Instead, put all the styling in a <style> block in the <head> section so every line looks the same without repeating code.

Frequently Asked Questions

Can I make the line vertical instead of horizontal?

The <hr> tag only creates horizontal lines. To make a vertical line, you would need to use a different approach — either a <div> with CSS styling or an image. For most web pages, horizontal lines are what you need.

What is the difference between <hr> and a border?

The <hr> tag is a standalone element that creates a line by itself. A border is a line drawn around the edge of another element, like a paragraph or box. Use <hr> when you want a line between sections; use a border when you want a line around content.

Does <hr> work in all browsers?

Yes. The <hr> tag is one of the oldest HTML elements and every browser displays it. Even very old browsers will show a horizontal line, though the styling may look slightly different.

Can I add a class or ID to an <hr> tag?

Yes. You can write <hr class="divider"> or <hr id="section-break"> just like any other HTML tag. This lets you style different lines differently using CSS classes or IDs.

This guide is for general information only and is not medical, financial, legal, or other professional advice. For decisions specific to your situation, consult a qualified professional. See our Editorial Policy.