How to Change the Color of an HR Element in CSS

By the end of this page, you will understand why styling an <hr> with color often does not produce the expected result, and how to correctly change its appearance using CSS properties such as border, border-color, background-color, and height. You will also see practical examples, common mistakes, and a small project to practice styling separators in a web page.

The main concept behind this question is how the <hr> element is rendered and styled in CSS.

An <hr> element represents a thematic break between sections of content. Although it looks like a simple line, browsers usually draw it using borders, not regular text color.

That is why this CSS often does not work as expected:

hr {
  color: #123455;
}

The color property mainly affects text color. Since <hr> does not contain visible text, changing color usually does not change the visible line.

To style the visible line, developers typically change one of these:

• border
• border-color
• height
• background-color

For example:

hr {
  border: 1px solid #123455;
}

or:

Think of an <hr> like a divider strip placed on a page.

• color changes the ink used for text.
• border changes the outline of a box.
• background-color changes the fill inside a box.

An <hr> is usually displayed more like a thin box or border than like text. So if you try to change its color, you are changing the wrong paint bucket.

A better mental model is:

• If you are styling words, use color
• If you are styling a line, check border or background-color

The most common ways to change an <hr> color are below.

1. Use border-color

hr {
  border: 1px solid #123455;
}

This works because the visible line is usually the border.

2. Remove the border and use background-color

hr {
  border: none;
  height: 2px;
  background-color: #123455;
}

This creates a clean custom line with a specific thickness.

3. Style only one side of the border

hr {
  border: none;
  border-top: 3px solid #123455;
}

This is a very common pattern because it avoids unexpected browser defaults.

Example HTML and CSS

<p>Section one</p>
<hr =>
Section two

Consider this example:

<hr class="line">

.line {
  border: none;
  height: 4px;
  background-color: #123455;
}

Here is what happens step by step:

1. The browser creates an <hr> element.
2. By default, the browser may give it a built-in border style.
3. border: none; removes that default line.
4. height: 4px; gives the element visible thickness.
5. background-color: #123455; fills the element with the chosen color.
6. The result is a solid horizontal bar that is 4 pixels tall.

Now compare it with this:

.line {
  color: #123455;
}

Step by step:

1. The browser applies the text color property.
2. The <hr> has no visible text to color.
3. The default border remains unchanged in many browsers.

Styled <hr> elements are common in real interfaces.

Examples

• Blog posts: separating sections or article summaries
• Dashboards: dividing cards, widgets, or report sections
• Forms: visually grouping related inputs
• E-commerce pages: separating product details, reviews, and shipping info
• Landing pages: creating subtle visual breaks between content blocks

Practical styling examples

Thin neutral divider

hr {
  border: none;
  border-top: 1px solid #ddd;
}

Thick brand-colored divider

hr {
  border: none;
  height: 4px;
  background-color: #123455;
}

Short centered divider

hr {
  border: none;
  border-top: 2px solid #123455;
  width: 120px;
  margin: 24px auto;
}

These patterns are useful when building polished layouts.

In real projects, developers rarely rely on the browser's default <hr> appearance. Instead, they usually define a reusable class or component.

Common patterns

1. Reset the default style first

hr {
  border: none;
}

This avoids inconsistent rendering across browsers.

2. Create reusable utility classes

.hr-light {
  border: none;
  border-top: 1px solid #e5e7eb;
}

.hr-dark {
  border: none;
  border-top: 1px solid #374151;
}

.hr-accent {
  border: none;
  height: 3px;
  background-color: #123455;
}

3. Use CSS variables for theming

:root {
  --divider-color: #123455;
}

hr {
  border: none;
  border-top: 2px solid var(--divider-color);
}

This makes it easier to update colors across an entire site.

Here are common beginner mistakes when styling <hr> elements.

1. Using color instead of border or background-color

Broken example

hr {
  color: red;
}

Better approach

hr {
  border: none;
  border-top: 1px solid red;
}

2. Forgetting to remove the default border

Some browsers apply default styles that may conflict with your custom style.

Problematic example

hr {
  height: 4px;
  background-color: #123455;
}

This may still show the default border.

Better approach

hr {
  border: none;
  height: 4px;
  background-color: #123455;
}

3. Setting height without a visible fill

Here is a comparison of common ways to style an <hr>:

Quick reference

Standard thin divider

hr {
  border: none;
  border-top: 1px solid #123455;
}

Thick divider

hr {
  border: none;
  height: 4px;
  background-color: #123455;
}

Short centered divider

hr {
  border: none;
  border-top: 2px solid #123455;
  width: 100px;
  margin: 20px auto;
}

Rules to remember

• color usually affects text, not the visible <hr> line
• <hr> is commonly styled through border or background-color
• Remove browser defaults with border: none when needed

Why does color not change the <hr> line?

Because color is mainly for text. The visible line of an <hr> is usually drawn using a border or box styling.

What is the best way to style an <hr> in CSS?

A common approach is:

hr {
  border: none;
  border-top: 1px solid #123455;
}

It is simple and works well for normal divider lines.

Can I make an <hr> thicker?

Yes. You can either increase the border thickness or remove the border and use height with background-color.

hr {
  border: none;
  height: 4px;
  background-color: #123455;
}

Should I use a class instead of styling all <hr> tags?

Yes, if only some separators need custom styling. Classes make your CSS more reusable and easier to maintain.

• CSS border — <hr> is often visually controlled by border styles.
• CSS background-color — useful when making thick custom divider bars.
• CSS box model — helps explain how height, margin, and borders affect the element.
• Block elements — <hr> behaves like a block-level element in layout.
• CSS classes — useful for styling only selected dividers.
• Browser default styles — important when understanding why elements look different before customization.
• Margin and spacing — essential for making dividers look clean in page layouts.