CSS: How to Add a Horizontal Line – Clean Dividers for Modern Web Design

A horizontal line is a simple yet effective way to separate content sections, enhance readability, and improve visual hierarchy in web layouts. Whether you’re working on blog posts, forms, or landing pages, horizontal rules help guide users’ attention and structure your content cleanly.

In this post, you’ll learn how to add a horizontal line using CSS, including different techniques, styling tips, and use cases.

---

🔹 Method 1: Using the <hr> Tag (The Easiest Way)

The HTML <hr> (horizontal rule) tag is specifically designed for this purpose.

✅ HTML

<hr>

By default, this renders a basic horizontal line. But it’s highly customizable with CSS.

---

✅ CSS Styling for <hr>

hr {
  height: 2px;
  background-color: #ccc;
  border: none;
  margin: 40px 0;
}

This makes the line thicker, colors it light gray, and removes the default border.

---

🔹 Method 2: Using a <div> as a Custom Horizontal Line

If you want more control or use custom classes for styling, a <div> works well.

✅ HTML

<div class="horizontal-line"></div>

✅ CSS

.horizontal-line {
  width: 100%;
  height: 2px;
  background-color: #000;
  margin: 30px 0;
}

This creates a solid horizontal line across the full width of its container.

---

🔹 Method 3: Decorative Line with Pseudo-elements

To add a line without additional HTML elements, use ::before or ::after.

✅ CSS

.section-title::after {
  content: "";
  display: block;
  width: 80px;
  height: 3px;
  background-color: #007bff;
  margin: 10px auto 0;
}

This technique is great for headings or section labels.

✅ HTML

<h2 class="section-title">Our Services</h2>

---

🔹 Common Line Styles

Style Type	CSS Example
Solid line	border-top: 2px solid #000;
Dashed line	border-top: 2px dashed #aaa;
Dotted line	border-top: 2px dotted #999;
Gradient line	Use background-image with linear-gradient

---

🌈 Gradient Horizontal Line Example

.gradient-line {
  height: 3px;
  background-image: linear-gradient(to right, #f06, #4a90e2);
  border: none;
}

Gives a colorful, modern divider effect.

---

🔹 Responsive Design Tip

Make sure your horizontal line adjusts on different screen sizes:

.horizontal-line {
  width: 100%;
  max-width: 600px;
  margin: 20px auto;
}

This keeps it centered and clean on both desktop and mobile.

---

✅ Final Thoughts

Whether you use the default <hr> tag or a custom-styled <div>, horizontal lines are a timeless UI pattern that improves content structure and visual clarity.

🧪 Summary

Method	Best Use
<hr> tag	Quick, semantic line separator
<div> with CSS	Fully customizable line
::after pseudo-element	Decorative line under titles
Gradient or styled border	Creative and modern visual dividers