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 create different dividers with CSS?
A divider on a web page is a styled element used to visually separate content sections. These dividers appear horizontally and can be styled as dotted, dashed, double, solid, or rounded lines. Dividers work similar to borders, and their appearance can be easily customized. To create dividers, we use the <hr> element and style it with CSS border properties.
Syntax
hr {
border-top: width style color;
border-radius: value; /* optional for rounded effect */
}
Method 1: Dashed Divider
To create a dashed divider, use the dashed border style ?
<!DOCTYPE html>
<html>
<head>
<style>
.dashed {
border: none;
border-top: 3px dashed #d81616;
margin: 20px 0;
}
</style>
</head>
<body>
<p>Content above divider</p>
<hr class="dashed">
<p>Content below divider</p>
</body>
</html>
Two paragraphs separated by a red dashed horizontal line divider appear on the page.
Method 2: Dotted Divider
To create a dotted divider, use the dotted border style ?
<!DOCTYPE html>
<html>
<head>
<style>
.dotted {
border: none;
border-top: 3px dotted #080ba7;
margin: 20px 0;
}
</style>
</head>
<body>
<p>Content above divider</p>
<hr class="dotted">
<p>Content below divider</p>
</body>
</html>
Two paragraphs separated by a blue dotted horizontal line divider appear on the page.
Method 3: Solid Divider
To create a solid divider, use the solid border style ?
<!DOCTYPE html>
<html>
<head>
<style>
.solid {
border: none;
border-top: 3px solid #12a726;
margin: 20px 0;
}
</style>
</head>
<body>
<p>Content above divider</p>
<hr class="solid">
<p>Content below divider</p>
</body>
</html>
Two paragraphs separated by a green solid horizontal line divider appear on the page.
Method 4: Rounded Divider
To create a rounded divider, combine a solid border with border-radius ?
<!DOCTYPE html>
<html>
<head>
<style>
.rounded {
border: none;
border-top: 8px solid #c8ff00;
border-radius: 5px;
margin: 20px 0;
}
</style>
</head>
<body>
<p>Content above divider</p>
<hr class="rounded">
<p>Content below divider</p>
</body>
</html>
Two paragraphs separated by a thick yellow-green horizontal line with rounded edges appear on the page.
Method 5: Double Divider
To create a double divider, use the double border style ?
<!DOCTYPE html>
<html>
<head>
<style>
.double {
border: none;
border-top: 3px double #db2ec4;
margin: 20px 0;
}
</style>
</head>
<body>
<p>Content above divider</p>
<hr class="double">
<p>Content below divider</p>
</body>
</html>
Two paragraphs separated by a pink double-line horizontal divider appear on the page.
Example: All Divider Types
Here's a complete example showing all divider styles together ?
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
.divider {
margin: 20px 0;
}
.dashed {
border: none;
border-top: 3px dashed #d81616;
}
.dotted {
border: none;
border-top: 3px dotted #080ba7;
}
.solid {
border: none;
border-top: 3px solid #12a726;
}
.rounded {
border: none;
border-top: 8px solid #c8ff00;
border-radius: 5px;
}
.double {
border: none;
border-top: 3px double #db2ec4;
}
</style>
</head>
<body>
<h2>Different CSS Dividers</h2>
<p>Dashed Divider</p>
<hr class="divider dashed">
<p>Dotted Divider</p>
<hr class="divider dotted">
<p>Solid Divider</p>
<hr class="divider solid">
<p>Rounded Divider</p>
<hr class="divider rounded">
<p>Double Divider</p>
<hr class="divider double">
</body>
</html>
A page displays five different divider styles: red dashed, blue dotted, green solid, yellow-green rounded, and pink double lines, each separating labeled content sections.
Conclusion
CSS dividers using the <hr> element provide an easy way to visually separate content sections. By combining different border styles with properties like border-radius, you can create diverse divider effects to enhance your page layout.
341 Views
