195 How To Draw A Line With Css

The Border-Based Approach

The most common and performant way to draw lines in CSS uses the border property. This approach works because borders render along the edges of elements, creating clean, customizable lines that integrate seamlessly with your web development workflow.

Horizontal Lines

Horizontal lines are created using border-top or border-bottom. A simple solid line requires specifying width, style, and color:

.horizontal-line {
 border-top: 2px solid #333;
 width: 100%;
}

The border property accepts three values in any order: width, style, and color. You can also set these individually using border-top-width, border-top-style, and border-top-color for more granular control over your designs.

Vertical Lines

Vertical lines use border-left or border-right, requiring a defined height:

.vertical-line {
 border-left: 3px solid #04AA6D;
 height: 100px;
}

For responsive vertical lines, consider using min-height or setting height relative to the parent container using percentage or viewport units.

Line Style Variations

The CSS <line-style> specification defines several values that create different visual effects, as documented in the MDN Web Docs. Each style serves specific design purposes:

• solid - A continuous, single line (most common for professional layouts)
• dashed - Series of short line segments for subtle separators
• dotted - Series of round or square dots for distinctive visual effects
• double - Two parallel lines with space between them for elegant dividers
• groove - 3D carved effect that appears as if carved into the surface
• ridge - 3D extruded effect, the opposite of groove
• inset - Embossed effect for an embedded appearance
• outset - Embossed effect for a raised appearance

.line-styles {
 border-top-width: 4px;
 border-top-color: #333;
}
.line-styles.solid { border-top-style: solid; }
.line-styles.dashed { border-top-style: dashed; }
.line-styles.dotted { border-top-style: dotted; }
.line-styles.double { border-top-style: double; }
.line-styles.groove { border-top-style: groove; }
.line-styles.ridge { border-top-style: ridge; }
.line-styles.inset { border-top-style: inset; }
.line-styles.outset { border-top-style: outset; }

The dashed and dotted styles render differently across browsers, as noted by CSS-Tricks. The dot shape and segment lengths are implementation-specific, so test across browsers if precision matters for your project.

The HR Element for Semantic Dividers

HTML provides the <hr> element specifically for thematic breaks between content. When semantically appropriate, use this element for content section transitions:

<p>First section content...</p>
<hr>
<p>Second section content...</p>

Customizing HR with CSS gives you full control while maintaining semantic meaning:

hr {
 border: none;
 border-top: 2px solid #333;
 margin: 2rem 0;
}

hr.fancy {
 height: 3px;
 background: linear-gradient(90deg, #ff6b6b, #feca57, #48dbfb);
 border-radius: 3px;
}

Use the <hr> element when the line represents a thematic change in your content. For decorative lines within components or UI designs, border-based approaches often make more sense and keep your markup semantic.

Gradient Lines for Visual Impact

CSS gradients create lines with visual interest beyond solid colors, perfect for adding polish to your front-end development projects:

.gradient-line {
 height: 4px;
 background: linear-gradient(90deg, #04AA6D, #2196F3, #9C27B0);
 border: none;
 border-radius: 2px;
}

.gold-accent {
 height: 3px;
 background: linear-gradient(
 90deg, 
 transparent 0%, 
 #FFD700 20%, 
 #FFD700 80%, 
 transparent 100%
 );
 border: none;
}

Multi-stop gradients add sophistication to section headers, footer accents, and hero dividers where visual impact matters.

SVG Lines for Precise Control

For situations requiring precise control--such as angled lines, consistent dashed patterns, or lines spanning arbitrary points--SVG provides capabilities CSS lacks, as demonstrated in W3Schools' CSS vertical line guide:

<svg width="100%" height="20">
 <line x1="0" y1="10" x2="100%" y2="10" stroke="#333" stroke-width="2" />
</svg>

SVG lines offer consistent dashed pattern rendering across browsers, angled line support, precise coordinate-based positioning, and animation capabilities.

Performance Best Practices

For optimal performance in modern web applications, particularly when building with Next.js or other frameworks targeting Core Web Vitals:

1. Prefer border-based lines - They use the browser's native rendering pipeline with minimal overhead
2. Avoid animated gradients - Gradient recalculations on every frame impact rendering performance
3. Use will-change sparingly - Only for necessary optimizations

.performance-line {
 border-top: 1px solid #ddd;
 width: 100%;
 will-change: border-color;
}

Common Use Cases

Section Separators

.section-divider {
 border: none;
 border-top: 1px solid #e0e0e0;
 margin: 3rem 0;
}

Form Field Dividers

.form-group {
 border-bottom: 1px solid #ddd;
 padding-bottom: 1rem;
 margin-bottom: 1rem;
}

Card Accents

.card-accent {
 border-left: 4px solid #04AA6D;
 padding-left: 1rem;
}

These patterns integrate well with modern responsive design approaches, ensuring your lines adapt gracefully across viewport sizes.

Sources

1. CSS-Tricks: #195 How to Draw a Line with CSS - Core methods and approaches for drawing lines with CSS
2. MDN Web Docs: <line-style> - Official CSS specification reference for line style values
3. W3Schools: CSS Vertical Line - Practical implementation examples for vertical lines