Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Change the Thickness of hr Tag using CSS?
The <hr> tag is used to draw horizontal lines on a web page. This tag is one of the most useful HTML tags for separating content by drawing a horizontal line between different sections. In this guide, we will learn how to change the thickness of an <hr> tag using CSS with different methods.
Syntax
hr {
height: value;
border: value;
}
The hr Tag in HTML
The <hr> tag stands for horizontal rule. It is a self-closing tag that creates a visual divider between sections of a web page using a horizontal line.
Example
<!DOCTYPE html>
<html>
<head>
<style>
hr {
margin: 20px 0;
}
</style>
</head>
<body>
<p>Section 1</p>
<hr>
<p>Section 2</p>
</body>
</html>
Two text sections separated by a thin horizontal line with proper spacing.
Method 1: Using Height Property
In this method, we directly use the height property of CSS to change the thickness of the <hr> tag. This method controls how thick the horizontal line appears
Example
<!DOCTYPE html>
<html>
<head>
<style>
hr {
height: 5px;
background-color: black;
border: none;
margin: 20px 0;
}
</style>
</head>
<body>
<p>Above the line</p>
<hr>
<p>Below the line</p>
</body>
</html>
Two text sections separated by a thick 5px black horizontal line.
Method 2: Using Border Property
In this method, we use the border-top or border-bottom property of CSS to create a thicker horizontal line. This method is more flexible and supports various designs such as dashed or dotted lines
Example
<!DOCTYPE html>
<html>
<head>
<style>
hr {
border: none;
border-top: 6px solid blue;
margin: 20px 0;
}
</style>
</head>
<body>
<p>Above the Line</p>
<hr>
<p>Below the Line</p>
</body>
</html>
Two text sections separated by a thick 6px blue horizontal line.
Comparison
| Method | Advantage | Best Use Case |
|---|---|---|
| Height Property | Simple and direct | Solid colored lines |
| Border Property | More customizable styles | Dashed, dotted, or styled lines |
Conclusion
You can easily change the thickness of the <hr> tag using CSS. The height method is straightforward for solid lines, while the border method offers more styling flexibility. Choose based on your design requirements.
10K+ Views
