How to create different dividers with CSS?

Different dividers with CSS: In this tutorial, we will learn how to create different dividers having different widths and colors with the help of CSS? By Apurva Mathur Last updated : July 25, 2023

In a webpage divider plays an important part, As it helps break up the content, showcases different sections, and can amplify design. It not only enhances the visual design of the page but also gives a better understanding to the users. These dividers should remain common on the entire page.

Creating different dividers with CSS

To create different dividers or to add horizontal lines, you can use HTML <hr> tag and style this tag using the CSS border property. You can add the type of the border/divider (dotted, dashed, or solid), the width of the divider, and color by using the CSS border property. If you want different but simple dividers then just use <hr> tag without using any CSS property.

CSS to create different dividers

Below is the CSS that you can use to create different dividers in a webpage with different types, widths, and colors

.type1 {
  border: 2px dashed #006969;
}
.type2 {
  border: 2px solid #f40;
}
.type3 {
  border: 2px dashed #ccc;
}
.type4 {
  border: 10px solid #006969;
  border-radius: 5px;
  /*to create round corners*/
}
.type5 {
  border: 5px double red;
}

Example to create different dividers using CSS

In the below-given example, we are adding 5 different dividers on the page after each heading. All dividers are created by using <hr> elements and applied the styles with the different CSS classes (type1, type2, and…).

<!DOCTYPE html>
<html>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <head>
    <style type="text/css">
      .type1 {
      border: 2px dashed #006969;
      }
      .type2 {
      border: 2px solid #f40;
      }
      .type3 {
      border: 2px dashed #ccc;
      }
      .type4 {
      border: 10px solid #006969;
      border-radius: 5px; /*to create round corners*/
      }
      .type5 {
      border: 5px double red;
      }
    </style>
  </head>
  
  <body>
    <h1>Example to create different dividers with CSS</h1>
    <p>In the below-example, we are adding 5 different dividers in the page after each heading. All dividers are created by using &lt;hr&gt; elements and styled with the different CSS classes (type1, type2, and…).
    <hr class="type1"/>
	
    <h2>Hello, Web Designer</h2>
    <hr class="type2"/>
	
    <h2>Hello, World!</h2>
    <hr class="type3"/>
	
    <h2>Hello, Folks!</h2>	
    <hr class="type4"/>
	
    <h2>Hello, Developers!</h2>
    <hr class="type5"/>	
  </body>

</html>

The output of the above example is:

Explanation

To make dividers, you just need to define the border property, in this property you have to provide 3 parameters.

The three parameters of border property are as follows:

The thickness of border: The first parameter defines the thickness of the border, just give a number with a specific unit and our border will appear with that thickness.
Types of the border: The second parameter refers to the type of parameter. We have different types of borders like solid, dashed, rounded, dotted, etc.
Color of the border: The color of the parameter is defined by this parameter. If you don't give any color then by default black color border will appear.

After specifying all the values you'll see the divider.

CSS Examples »

How to create a fixed footer using CSS?

How to use google fonts on your webpage?