DEV Community

Cover image for Change the Thickness of hr Tag using CSS
Dhanush
Dhanush

Posted on

Change the Thickness of hr Tag using CSS

#html #css #webdev #frontend

Introduction

The < hr > tag in HTML is used to create a simple horizontal line that separates different sections on a webpage. By default, browsers show this line with a thin thickness (usually 1 to 2 pixels) and a basic color. In modern web design, you might want to change this style so that it fits better with your website's overall look. This post will teach you a few simple CSS methods to adjust the thickness of the < hr > tag, making your design look neat and consistent.

Different Approaches to Change Thickness

There are two primary methods to adjust the thickness of the < hr > tag using CSS. Each approach offers flexibility depending on your design goals.

Approach 1: Using the height and background-color Properties

This method involves overriding the < hr > tag’s default border and using the height property to control thickness.

Syntax

hr.custom-hr { height: [desired-thickness]; border: none; background-color: [desired-color]; }
Enter fullscreen mode Exit fullscreen mode

Example 1: Basic Thickness Adjustment
In this example, we create a 4-pixel-thick gray line:

<!DOCTYPE html> <html> <head> <style> hr.thick-hr { height: 4px; border: none; background-color: #666; } </style> </head> <body> <p>Section 1</p> <hr class="thick-hr"> <p>Section 2</p> </body> </html>
Enter fullscreen mode Exit fullscreen mode

output1

Example 2: Gradient Line
For a modern look, replace the solid color with a gradient:

<!DOCTYPE html> <html> <head> <style> hr.gradient-hr { height: 6px; border: none; background: linear-gradient(90deg, #ff6b6b, #4ecdc4); } </style> </head> <body> <p>Section 1</p> <hr class="gradient-hr"> <p>Section 2</p> </body> </html>
Enter fullscreen mode Exit fullscreen mode

output2

Approach 2: Using the border Property

Instead of modifying the height, this method styles the top border of the < hr > element.

Syntax

hr.border-hr { border: none; /* Removes all borders */ border-top: [desired-thickness] [style] [color]; }
Enter fullscreen mode Exit fullscreen mode

Example 3: Solid Colored Border
Create a 5-pixel-thick red line:

<!DOCTYPE html> <html> <head> <style> hr.red-hr { border: none; border-top: 5px solid #ff0000; } </style> </head> <body> <p>Section 1</p> <hr class="red-hr"> <p>Section 2</p> </body> </html>
Enter fullscreen mode Exit fullscreen mode

output3

Example 4: Dashed Border
Customize the line style with a dashed border:

<!DOCTYPE html> <html> <head> <style> hr.dashed-hr { border: none; border-top: 3px dashed #00a8ff; } </style> </head> <body> <p>Section 1</p> <hr class="dashed-hr"> <p>Section 2</p> </body> </html>
Enter fullscreen mode Exit fullscreen mode

output4

Additional Tips

  • Adjust Margins: Use margin-top and margin-bottom to control spacing around the < hr >.
  • Browser Compatibility: Both methods work across modern browsers.
  • Combine Techniques: Mix gradients with borders for unique effects.

Conclusion

Changing the thickness of the < hr > tag is very easy with CSS. You can either use the height and background-color method or style the border property to get the look you want. Both techniques give you good control over how the line appears. I hope this guide helps you understand and improve your web design.

Top comments (1)

Collapse
 
dhanush9952 profile image
Dhanush •

If you found this guide on customizing the < hr > tag with CSS helpful, be sure to follow @dhanush9952 for more web development tips and tricks!

I’ll be sharing valuable insights and tutorials regularly.

Let’s create stunning websites together!