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 Divide a Horizontal Line into Multiple Parts?
In HTML, the <hr> tag stands for horizontal rule and is most commonly displayed as a horizontal line used to separate content or define a change in an HTML page. The <hr> tag is an empty element that does not require a closing tag.
While the standard <hr> creates a single continuous line, we can divide it into multiple parts using CSS properties to create visually appealing section dividers.
Syntax
Following is the basic syntax for the <hr> element
<hr>
The <hr> tag supports several deprecated attributes like align, color, noshade, size, and width. However, it is recommended to use CSS for styling instead of these HTML attributes.
Standard Horizontal Line
Following example shows the default behavior of the <hr> tag
<!DOCTYPE html> <html> <head> <title>Standard Horizontal Rule</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h3>It is a beautiful day</h3> <hr> <p>There is a horizontal rule above this line.</p> </body> </html>
The output shows a standard solid horizontal line separating the content
It is a beautiful day ____________________ (solid gray line) There is a horizontal rule above this line.
Using Dashed Border to Create Divided Lines
The border-top CSS property can be used with the dashed value to create a horizontal line that appears divided into multiple segments. This creates the visual effect of a broken or segmented line.
Syntax
hr {
border-top: width style color;
border-bottom: none;
border-left: none;
border-right: none;
}
Example
Following example uses the border-top property with dashed style to divide a horizontal line into multiple parts
<!DOCTYPE html>
<html>
<head>
<title>Dashed Horizontal Line</title>
<style>
hr {
border: none;
border-top: 4px dashed #8A2BE2;
margin: 20px 0;
}
.content {
background-color: #F8F8FF;
padding: 15px;
color: #4B0082;
font-size: 16px;
border: 1px solid #DDA0DD;
border-radius: 5px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<hr>
<h2>A Life Lesson</h2>
<hr>
<div class="content">
The unhappiest people are often those who care the most about what everyone else thinks. There is great freedom in leaving others to their opinions.
</div>
</body>
</html>
The output displays dashed lines that appear as multiple segments
- - - - - - - - - - - (purple dashed line) A Life Lesson - - - - - - - - - - - (purple dashed line) The unhappiest people are often those who care... (styled content box)
Using Multiple HR Elements with Different Widths
Another approach is to use multiple <hr> elements with the CSS display: inline-block property and different widths. This creates separate line segments that appear as a divided horizontal line.
Example
Following example creates multiple horizontal line segments using separate <hr> elements
<!DOCTYPE html>
<html>
<head>
<title>Multiple HR Segments</title>
<style>
.segment {
display: inline-block;
border: none;
border-top: 4px solid #C71585;
margin: 0;
}
.seg1 { width: 80px; }
.seg2 { width: 60px; margin-left: 15px; }
.seg3 { width: 50px; margin-left: 15px; }
.seg4 { width: 40px; margin-left: 15px; }
.seg5 { width: 30px; margin-left: 15px; }
.content {
background-color: #FFF5EE;
padding: 15px;
margin-top: 20px;
text-align: justify;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>CSS Display Property</h2>
<hr class="segment seg1">
<hr class="segment seg2">
<hr class="segment seg3">
<hr class="segment seg4">
<hr class="segment seg5">
<div class="content">
The display CSS property determines whether an element is treated as a block or inline element, as well as the layout used for its children.
</div>
</body>
</html>
The output shows multiple line segments of decreasing widths
CSS Display Property ______ _____ ____ ___ __ (pink line segments of decreasing width) The display CSS property determines whether an element is treated as...
Using CSS Pseudo-elements
A more advanced approach uses CSS pseudo-elements to create divided lines without multiple HTML elements.
Example
Following example uses CSS ::before and ::after pseudo-elements to create a three-part divided line
<!DOCTYPE html>
<html>
<head>
<title>Pseudo-element Divided Line</title>
<style>
.divided-line {
position: relative;
height: 4px;
background-color: #FF6347;
width: 200px;
margin: 20px auto;
}
.divided-line::before,
.divided-line::after {
content: "";
position: absolute;
height: 4px;
background-color: #FF6347;
top: 0;
}
.divided-line::before {
width: 60px;
left: -80px;
}
.divided-line::after {
width: 60px;
right: -80px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h2>Divided Line with Pseudo-elements</h2>
<div class="divided-line"></div>
<p>This creates three separate line segments using a single HTML element.</p>
</body>
</html>
The output displays three separate line segments created with pseudo-elements
Divided Line with Pseudo-elements ____ ________ ____ (three orange line segments) This creates three separate line segments using a single HTML element.
Comparison of Methods
Following table compares the different methods to divide horizontal lines
| Method | HTML Elements | CSS Complexity | Best Use Case |
|---|---|---|---|
| Dashed Border | Single <hr>
|
Simple | Quick visual separation with automatic spacing |
| Multiple HR Elements | Multiple <hr>
|
Moderate | Custom segment lengths and precise control |
| Pseudo-elements | Single <div>
|
Advanced | Clean HTML with complex positioning needs |
Conclusion
Horizontal lines can be divided into multiple parts using CSS techniques like dashed borders, multiple inline-block HR elements, or pseudo-elements. The dashed border method is simplest for basic segmentation, while multiple HR elements offer precise control over individual segments. Choose the method based on your design requirements and CSS complexity preferences.
551 Views
