<p>border-top: 1px dashed #000;</p>
<hr class="border01">

<p>linear-gradient #1</p>
<hr class="border02">

<p>linear-gradient #2</p>
<hr class="border03">
body {
	margin: 2em;
}
p {
	margin: 2em 0 1em;
}

.border01 {
  border-top: 1px dashed #000;
}
.border02 {
  height: 1px;
  background-image: linear-gradient(90deg, #000, #000 75%, transparent 75%, transparent 100%);
  background-size: 20px 1px;
  border: none;
}
.border03 {
  height: 4px;
  background-image: linear-gradient(90deg, transparent, transparent 50%, #fff 50%, #fff 100%), linear-gradient(90deg, #69d2e7, #a7dbd8, #e0e4cc, #f38630, #fa6900);
  background-size: 20px 3px, 100% 3px;
  border: none;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.