<hr class="cp_hr01" />

.cp_hr01 {
	border-width: 1px 0 0 0;
	border-style: solid;
	border-color: #43a047;
}

<hr class="cp_hr02" />

.cp_hr02 {
	border-width: 1px 0 0 0;
	border-style: dashed;
	border-color: #ffb300;
}

<hr class="cp_hr03" />

.cp_hr03 {
	border-width: 1px 0 0 0;
	border-style: dotted;
	border-color: #1e88e5;
}

<hr class="cp_hr04" />

.cp_hr04 {
	border-width: 3px 0 0 0;
	border-style: double;
	border-color: #ff6f00;
}

<hr class="cp_hr05" />

.cp_hr05 {
	position: relative;
	height: 1px;
	border-width: 0;
	background-color: #00bcd4;
	background-image: -webkit-linear-gradient(left,
	#00bcd4 0%,#283593 50%,#00bcd4 100%);
	background-image:         linear-gradient(90deg,
	#00bcd4 0%,#283593 50%,#00bcd4 100%);
}

<hr class="cp_hr06" />

.cp_hr06 {
	position: relative;
	height: 1px;
	border-width: 0;
	background-image: -webkit-linear-gradient(left,
	transparent 0%,#283593 50%,transparent 100%);
	background-image:         linear-gradient(90deg,
	transparent 0%,#283593 50%,transparent 100%);
}

<hr class="cp_hr07" />

.cp_hr07 {
	position: relative;
	overflow: visible;
	text-align: center;
	color: #f06292;
	border-width: 3px 0 0 0;
	border-style: double;
	border-color: #f06292;
}
.cp_hr07::after {
	position: absolute;
	top: -0.7em;
	left: 50%;
	display: inline-block;
	content: '\2661';
	background: #ffffff;
}

<hr class="cp_hr08" />

.cp_hr08 {
	border-top: 1px dashed #8c8b8b;
	border-bottom: 1px dashed #ffffff;
}

<hr class="cp_hr09" />

.cp_hr09 {
	height: 2px;
	border-width: 0;
	background-color: #80deea;
	background-image: -webkit-linear-gradient(right,
	#80deea 5px,#0097a7 5px);
	background-image:         linear-gradient(-90deg,
	#80deea 5px,#0097a7 5px);
	background-size: 10px 10px;
}

<hr class="cp_hr10" />

.cp_hr10 {
	height: 5px;
	border-width: 0;
	background-image: -webkit-linear-gradient(right,
	#c2185b 0px,#c2185b 5px,#1976d2 5px,#1976d2 10px,
	#388e3c 10px,#388e3c 15px,#fbc02d 15px,#fbc02d 20px,
	#e64a19 20px,#e64a19 25px);
	background-image:         linear-gradient(-90deg,
	#c2185b 0px,#c2185b 5px,#1976d2 5px,#1976d2 10px,
	#388e3c 10px,#388e3c 15px,#fbc02d 15px,#fbc02d 20px,
	#e64a19 20px,#e64a19 25px);
	background-size: 25px 25px;
}

<hr class="cp_hr11" />

.cp_hr11 {
	height: 3px;
	border-width: 0;
	background-color: #ffccbc;
	background-image: -webkit-linear-gradient(135deg,
	#ff5722 0px,#ff5722 2px, transparent 2px, transparent 4px,
	#ff5722 4px, #ff5722 6px, transparent 6px, transparent);
	background-image:         linear-gradient(-45deg,
	#ff5722 0px,#ff5722 2px, transparent 2px, transparent 4px,
	#ff5722 4px, #ff5722 6px, transparent 6px, transparent);
	background-size: 6px 6px;
}

<hr class="cp_hr12" />

.cp_hr12 {
  height: 3px;
  border-width: 0;
  background-repeat: repeat-x;
  background-size: 0.7em 0.3em,1.7em 0.3em,3.5em 0.3em,3.7em 0.3em;
  background-position: right bottom;
  background-image:
  radial-gradient(0.3em 0.2em at center center,#94c79e,rgba(246,89,115,0)),
  radial-gradient(0.5em 0.2em at center center,#94c79e,rgba(246,89,115,0)),
  radial-gradient(0.8em 0.2em at center center,#94c79e,rgba(246,89,115,0)),
  radial-gradient(7.2em 0.2em at center center,#94c79e,rgba(246,89,115,0));
}