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

---

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

---

element for the divider ?

Style the

---

to create a dashed divider ?

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

Create a dotted divider

Create an

---

element for the divider ?

Style the

---

to create a dotted divider ?

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

Create a solid divider

Create an

---

element for the divider ?

Style the

---

to create a solid divider ?

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

Create a rounded divider

Create an

---

element for the divider ?

Style the

---

to create a rounded divider ?

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

Create a double divider

Create an

---

element for the divider ?

Style the

---

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 ?

   


   
Dividers Example
   
Dashed
   

   
Dotted
   

   
Solid
   

   
Rounded
   

   
Double