LAST UPDATED: AUGUST 5, 2021
How to create divider with CSS?
The divider on the webpage is used to separate the contents into sections, groups, or parts. It will help the user to distinguish the contents accordingly.
In this tutorial, we will be learning to create a divider with CSS.
Creating a divider
HTML <hr> element is used to add a divider a horizontal line on the webpage. We can style this element using CSS border property. We can add a dotted, dashed, or solid divider. The thickness and color of the divider can be changed accordingly.
Example: Creating a divider with CSS
Here, we have created a solid divider of color blue and width 2px.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
</head>
<style>
hr {
border: 2px solid blue;
}
</style>
<body>
<h2> Creating a divider</h2>
<p>The divider on the webpage is used to separate the contents into sections, groups, or parts. It will help the user to distinguish the contents accordingly. In this tutorial, we will be learning to create a divider with CSS.</p>
<hr>
<p>HTML hr element is used to add a divider a horizontal line on the webpage which acts as a divider. We can style this divide using CSS border property. We can add a dotted, dashed, or solid divider. The thickness and color of the divider can be changed accordingly. </p>
</body>
</html>
Output
Here is the output of the above program.
Example: Creating a divider with CSS
In this example, we are going to add dashed and dotted dividers.
Conclusion
In this tutorial, we have added a divider with <hr> element and customize it with CSS border property. We can add a solid, dashed, or dotted divider to the page.
