How to add a horizontal line
Put <hr> between two blocks of content. It has no closing tag:
By default the line spans the full width of its container, has a small margin above and below, and is drawn as a thin gray inset border (a light and a dark edge).
<hr> stands for horizontal rule. In HTML it means a thematic break: a shift of topic or scene inside a section. Screen readers announce it as a separator. If you only want a decorative line (under a heading, around a card), draw it with a CSS border on that element instead.
Styling an hr with CSS
The default look comes from borders, so the reliable way to style an <hr> is to remove them and draw one border yourself:
| To change | Use |
|---|---|
| Color | border-top: 2px solid #2563eb (after border: none) |
| Thickness | The width in that border, like 6px |
| Style | solid, dashed, dotted, double |
| Length | width: 40%, plus margin-inline: auto to center it |
| Rounded ends | height + background + border-radius instead of a border |
| Space around it | margin |
Setting only color: blue on an hr does change the line in current browsers, but the default inset style shades it and it keeps a 2px height. Resetting the border gives you exactly what you ask for.
Old hr attributes
Old code uses attributes on the tag itself:
<hr size="4" width="50%" color="red" noshade align="left">
size, width, color, noshade and align are obsolete. Browsers still apply them so old pages look right, but they are invalid HTML and harder to change later. Replace them with the CSS above.
A divider with text in the middle
The "or" line between two sign-in buttons is not an <hr> (an hr cannot contain text). It is a flex row with a line drawn on each side of the word:
The two ::before and ::after pieces each take half of the free space with flex: 1 and draw a top border. Change or to a longer word and the lines shrink to fit.
Vertical lines
There is no vertical version of <hr>. Draw a vertical line with a border on one side of an element, or with a thin element inside a flex row:
border-inline-start puts the line at the start of the text, which is the left in English and the right in Arabic or Hebrew, so the layout works in both directions.
Common mistakes
- Writing
</hr>.<hr>is a void element.<hr>or<hr />is all you need. - Using
<hr>for decoration. Screen readers announce each one. A line that is only visual belongs in CSS. - Styling with
coloralone. Reset the border withborder: noneand setborder-top. - Using
<br>or underscores to draw lines. Use<hr>or a border. See line break for what<br>is for. - Using obsolete attributes. Move
size,width,colorandnoshadeinto CSS.
Frequently Asked Questions
How do I add a horizontal line in HTML?
Use the <hr> tag on its own line. It is a void element with no closing tag, and it draws a line across the full width of its container.
How do I change the color of an hr?
Remove the default border and draw your own: hr { border: none; border-top: 2px solid #2563eb; }. Setting only color changes it too, but the default inset style keeps it shaded and two-toned.
How do I make an hr thicker?
Set the border width: hr { border: none; border-top: 4px solid #111827; }. The size attribute from old tutorials still works in browsers but is obsolete, so use CSS.
What does hr stand for?
Horizontal rule. In current HTML it means a thematic break: a change of topic or scene between paragraphs. Screen readers announce it as a separator.
How do I make a vertical line in HTML?
HTML has no vertical rule tag. Add a border to one side of an element, such as border-inline-start: 2px solid #e5e7eb, or use a narrow element with a background color inside a flex row.
