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 (0)