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>
<title>How To Create Dividers With CSS ?</title>

/* 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;


<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">

</html> code-box


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.

You also read this

Post a Comment

Previous Post Next Post