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 add horizontal line in HTML?
In this article, we will show you how to add a horizontal line to your webpage using HTML. A horizontal line, also known as a horizontal rule, is a way to separate content on a webpage and can be used for visual appeal or to indicate a change in content.
There are multiple ways to add a horizontal line to your webpage in HTML, but the most common approach is by using the <hr> tag. The <hr> tag is a self-closing tag that creates a horizontal line on the webpage. This approach is simple and straightforward, and it requires minimal code. However, it does not provide much flexibility in terms of customization. The horizontal line created using the <hr> tag will have a default look and feel, and it may not blend well with the design of your webpage.
Another approach to adding a horizontal line in HTML is by using CSS. By using CSS, you can customize the appearance of the horizontal line to match the design of your webpage. You can change the color, width, height, and other properties of the horizontal line to make it fit seamlessly into your webpage.
Syntax
Following is the syntax for the <hr> tag
<hr>
Following is the syntax for CSS-based horizontal lines
.line {
border-bottom: width style color;
/* or */
border-top: width style color;
}
Using the HR Tag
The first approach to adding a horizontal line in HTML is by using the <hr> tag. This approach is quick and easy to implement, making it perfect for situations where you need a simple horizontal line to separate content on your webpage. Additionally, the <hr> tag is supported by all major web browsers, so you can be sure that it will be rendered correctly on your webpage.
The <hr> tag is a self-closing element that creates a thematic break between content sections. By default, it appears as a solid gray line spanning the full width of its container.
Basic HR Example
Following is a basic example of how to add a horizontal line using the <hr> tag
<!DOCTYPE html> <html> <head> <title>Basic HR Example</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h1>Welcome to TutorialsPoint</h1> <p>This is the first section of content.</p> <hr> <p>This is some text that will appear below the horizontal line.</p> <hr> <h2>Another Section</h2> <p>Content continues here after another horizontal line.</p> </body> </html>
The output displays horizontal lines separating different sections of content
Welcome to TutorialsPoint This is the first section of content. _________________________________________________ This is some text that will appear below the horizontal line. _________________________________________________ Another Section Content continues here after another horizontal line.
Styling HR with CSS
While the <hr> tag has a default appearance, you can customize it using CSS to better match your webpage design
<!DOCTYPE html>
<html>
<head>
<title>Styled HR Examples</title>
<style>
.thick-line {
border: none;
height: 5px;
background-color: #333;
margin: 20px 0;
}
.colored-line {
border: none;
height: 2px;
background-color: #4CAF50;
width: 50%;
margin: 20px auto;
}
.dashed-line {
border: none;
border-top: 3px dashed #ff6b6b;
margin: 20px 0;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Default HR</h2>
<hr>
<h2>Thick Black Line</h2>
<hr class="thick-line">
<h2>Centered Green Line</h2>
<hr class="colored-line">
<h2>Dashed Red Line</h2>
<hr class="dashed-line">
</body>
</html>
This example shows different styling options for the <hr> tag, including thickness, color, width, and line style variations.
Using CSS Border Properties
The second approach to adding a horizontal line in HTML is by using CSS border properties. Using CSS to create a horizontal line allows you to have more control over the appearance of the line. You can change the color, thickness, and even add different border styles like dotted, dashed, or double lines.
With CSS, you can create multiple lines with different styles and apply them to different sections of your webpage, which can be useful for creating visual separations between different elements on your page.
Using Border-Bottom Property
Following is an example of creating horizontal lines using the CSS border-bottom property
<!DOCTYPE html>
<html>
<head>
<title>CSS Border Lines</title>
<style>
.horizontal-line {
border-bottom: 2px solid black;
margin: 15px 0;
}
.dotted-line {
border-bottom: 3px dotted blue;
margin: 15px 0;
}
.double-line {
border-bottom: 4px double red;
margin: 15px 0;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>Welcome to TutorialsPoint</h1>
<div class="horizontal-line"></div>
<p>This is some text below a solid black line.</p>
<div class="dotted-line"></div>
<p>This text appears below a dotted blue line.</p>
<div class="double-line"></div>
<p>This content follows a double red line.</p>
</body>
</html>
The output shows different types of horizontal lines created using CSS border properties
Welcome to TutorialsPoint _____________________ (solid black line) This is some text below a solid black line. ..................... (dotted blue line) This text appears below a dotted blue line. ==================== (double red line) This content follows a double red line.
Using Pseudo-Elements for Lines
You can also create horizontal lines using CSS pseudo-elements, which provides more flexibility in positioning
<!DOCTYPE html>
<html>
<head>
<title>Pseudo-Element Lines</title>
<style>
.section-divider {
position: relative;
text-align: center;
margin: 30px 0;
color: #666;
}
.section-divider::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background-color: #ccc;
}
.section-divider span {
background-color: white;
padding: 0 15px;
font-weight: bold;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<p>Content in the first section.</p>
<div class="section-divider"><span>Section Break</span></div>
<p>Content in the second section after the divider.</p>
</body>
</html>
This creates a horizontal line with text centered on top of it, useful for section breaks with labels.
Comparison of Methods
| Feature | HR Tag | CSS Border |
|---|---|---|
| Ease of Implementation | Very simple, single tag | Requires CSS styling |
| Semantic Meaning | Represents thematic break | Purely decorative |
| Customization Options | Limited without CSS | Full control over appearance |
| Positioning Flexibility | Block-level, full width | Can be positioned anywhere |
| Browser Support | Universal support | Modern CSS features may vary |
| File Size Impact | Minimal | Additional CSS rules |
Advanced Styling Techniques
Gradient Lines
You can create more advanced horizontal lines using CSS gradients
<!DOCTYPE html>
<html>
<head>
<title>Advanced Line Styles</title>
<style>
.gradient-line {
height: 3px;
background: linear-gradient(to right, transparent, #4CAF50, transparent);
margin: 20px 0;
border: none;
}
.shadow-line {
height: 1px;
background-color: #ddd;
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
margin: 20px 0;
border: none;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<p>Content before gradient line.</p>
<hr class="gradient-line">
<p>Content between lines.</p> 
5K+ Views
