HTML Pocket

HTML Line Divider generator

Design a horizontal separator visually and copy the code. Free, no signup, everything runs in your browser.

Color#ca8a04
Thickness2px
Width60%
Alignment
Line style

How to use

  1. Pick a color with the color picker, or type a hex value.
  2. Drag the sliders to set thickness (1–10px) and width (10–100%).
  3. Choose alignment (left, center, right) and a line style (solid, dashed or double).
  4. The preview updates live, and both code boxes stay in sync.
  5. Copy the inline-style <hr> for a quick paste, or the CSS class for your stylesheet.

What is an HTML line divider?

A line divider is a horizontal rule that separates two sections of a page. In HTML it is created with the <hr> element, which browsers render as a thin line by default. With a few lines of CSS the same element becomes a design feature: a dashed editorial rule, a thick colorful band, or a centered divider that spans 60% of the page.

Start with thickness: 1–2px reads as a quiet editorial rule, while 4px and above turns the divider into a visual statement. Color should usually come from your existing palette — a muted gray or your brand accent works better than a pure black line. Width between 40% and 70% with centered alignment gives the classic "chapter break" feel; full width suits dense documentation.

Common mistakes

  • Styling <hr> with height alone — set border: none first, otherwise browsers keep their default border and you get a strange double line.
  • Using the deprecated noshade or size attributes. They still render, but CSS is the supported way.
  • Forgetting that <hr> is semantic: it marks a thematic break, not decoration. For purely decorative lines inside a component, a styled <div> with a border is often the better choice.

Example: a centered dashed rule

hr.divider {
  border: none;
  border-top: 2px dashed #ca8a04;
  width: 60%;
  margin-left: auto;
  margin-right: auto;
}

FAQ

What tag draws a horizontal line in HTML?

The <hr> element. It stands for 'horizontal rule' and renders as a thematic break between blocks of content. You style it with CSS, not with the old size or noshade attributes.

How do I change the color of an <hr>?

Set border: none; then give it a border-top with your color, for example border-top: 2px solid #ca8a04. This generator writes that CSS for you.

How do I make a dashed or double divider?

Change the border-top style: dashed for a dashed line, or use border-top and border-bottom together to fake a double line. The 'Double' option in this tool generates exactly that.

Can the divider be shorter than the full page width?

Yes. Set a width percentage and use margin-left and margin-right with auto to center it, or one side auto to push it left or right.

Does <hr> need a closing tag or content?

No. <hr> is an empty element — it has no closing tag and no text content.

Related tool

HTML StripperRemove all HTML tags and get clean plain text.

References

Last updated: 2026-08-29