How TO - Divider


Learn how to create different dividers with CSS.


Dashed


Dotted


Solid


Rounded


Try it Yourself »

How To Create Dividers

Step 1) Add HTML:

Example

<hr class="dashed">
<hr class="dotted">
<hr class="solid">
<hr class="rounded">
Step 2) Add CSS:

Example

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

Copyright 1999-2023 by Refsnes Data. All Rights Reserved.