How to create different dividers with CSS?


A divider on a web page is separate styled for dividing sections. These sections appear horizontally on a web page. A dotted, dashed, double, etc. dividers can be easily created. It works like borders and the color of such dividers can easily change. To create a divider, use the <hr> element and style it with border properties on a web page. Let us see how to create dividers with CSS.

Create a dashed divider

Create an <hr> element for the divider −

<hr class="dashed" />

Style the <hr> to create a dashed divider −

.dashed {
   border-top: 3px dashed rgb(216, 22, 22);
}

Create a dotted divider

Create an <hr> element for the divider −

<hr class="dotted" />

Style the <hr> to create a dotted divider −

.dotted {
   border-top: 3px dotted rgb(8, 11, 167);
}

Create a solid divider

Create an <hr> element for the divider −

<hr class="solid" />

Style the <hr> to create a solid divider −

.solid {
   border-top: 3px solid rgb(18, 167, 38);
}

Create a rounded divider

Create an <hr> element for the divider −

<hr class="rounded" />

Style the <hr> to create a rounded divider −

.rounded {
   border-top: 8px solid rgb(200, 255, 0);
   border-radius: 5px;
}

Create a double divider

Create an <hr> element for the divider −

<hr class="double" />

Style the <hr> to create a double divider −

.double {
   border-top: 3px double rgb(219, 46, 196);
}

Example

To create different dividers with CSS, the code is as follows −

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      }
      .dashed {
         border-top: 3px dashed rgb(216, 22, 22);
      }
      .dotted {
         border-top: 3px dotted rgb(8, 11, 167);
      }
      .solid {
         border-top: 3px solid rgb(18, 167, 38);
      }
      .rounded {
         border-top: 8px solid rgb(200, 255, 0);
         border-radius: 5px;
      }
      .double {
         border-top: 3px double rgb(219, 46, 196);
      }
   </style>
</head>
<body>
   <h1>Dividers Example</h1>
   <p>Dashed</p>
   <hr class="dashed" />
   <p>Dotted</p>
   <hr class="dotted" />
   <p>Solid</p>
   <hr class="solid" />
   <p>Rounded</p>
   <hr class="rounded" />
   <p>Double</p>
   <hr class="double" />
</body>
</html>

Updated on: 14-Dec-2023

152 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements