In this post, we will learn how to create dividers with HTML and CSS. A divider is a line that separates two sections. So how we can make divider, we will learn in this post. 


How To Create Dividers With HTML And CSS ?


Create Dividers With HTML And CSS

To create dividers with CSS, we use  hr  HTML tag and  border  CSS property. With this  border  property we make dividers of different styles. 


<!DOCTYPE html>
<html>
<head>
<title>How To Create Dividers With CSS ?</title>
<style>

/* Dashed border */
hr.dashed-border {
border-top: 2px dashed #000;
}

/* Dotted border */
hr.dotted-border {
border-top: 2px dotted #000;
}

/* Solid border */
hr.solid-border {
border-top: 2px solid #000;
}

/* Rounded border */
hr.rounded-border {
border-top: 5px solid #000;
border-radius: 5px;
}

</style>
</head>
<body>

<h2>Different style of Dividers</h2>

<p>Dashed Border</p>
<hr class="dashed-border">

<p>Dotted Border</p>
<hr class="dotted-border">

<p>Solid Border</p>
<hr class="solid-border">

<p>Rounded Border</p>
<hr class="rounded-border">

</body>
</html> code-box



Summary

In this post we learned how to create dividers with HTML and CSS. You try to make it yourself. I hope you make. If you face any problem, then comment and tell us. Keep visiting the blog to read more similar posts.

Post a Comment

Previous Post Next Post