How to create: separator

Learn how to use CSS to create different separators.

Dashed

Dotted

Solid

Rounded

Try it yourself

How to create a separator

Step 1 - Add HTML:

<hr class="dashed">
<hr class="dotted">
<hr class="solid">
<hr class="rounded">

Step 2 - Add CSS:

/* Dashed border */
hr.dashed {
  border-top: 3px dashed #bbb;
}
/* Dotted border */
hr.dotted {
  border-top: 3px dotted #bbb;
}
/* Solid border */
hr.solid {
  border-top: 3px solid #bbb;
}
/* Rounded border */
hr.rounded {
  border-top: 8px solid #bbb;
  border-radius: 5px;
}

Try it yourself