/* HTMLの「.style**」は数字を順番に入れて、ご利用ください。*/

hr.style1{
	border-top: 1px solid #f5f5f5;
}
hr.style2 {
	border-top: 3px double #f5f5f5;
}
hr.style3 {
	border-top: 1px dashed #f5f5f5;
}
hr.style4 {
	border-top: 1px dotted #f5f5f5;
}
hr.style5 {
	background-color: #fff;
	border-top: 2px dashed #f5f5f5;
}
hr.style6 {
	background-color: #fff;
	border-top: 2px dotted #f5f5f5;
}

hr.style7 {
	border-top: 1px solid #f5f5f5;
	border-bottom: 1px solid #fff;
}
hr.style8 {
	border-top: 1px solid #f5f5f5;
	border-bottom: 1px solid #fff;
}
hr.style8:after {
	content: '';
	display: block;
	margin-top: 2px;
	border-top: 1px solid #f5f5f5;
	border-bottom: 1px solid #fff;
}
hr.style9 {
	border-top: 1px dashed #f5f5f5;
	border-bottom: 1px dashed #fff;
}
hr.style10 {
	border-top: 1px dotted #f5f5f5;
	border-bottom: 1px dotted #fff;
}
hr.style11 {
	height: 6px;
	background: url(http://ibrahimjabbari.com/english/images/hr-11.png) repeat-x 0 0;
    border: 0;
}
hr.style12 {
	height: 6px;
	background: url(http://ibrahimjabbari.com/english/images/hr-12.png) repeat-x 0 0;
    border: 0;
}
hr.style13 {
	height: 10px;
	border: 0;
	box-shadow: 0 10px 10px -10px #f5f5f5 inset;
}
hr.style14 { 
  border: 0; 
  height: 1px; 
  background-image: -webkit-linear-gradient(left, #f0f0f0, #f5f5f5, #f0f0f0);
  background-image: -moz-linear-gradient(left, #f0f0f0, #f5f5f5, #f0f0f0);
  background-image: -ms-linear-gradient(left, #f0f0f0, #f5f5f5, #f0f0f0);
  background-image: -o-linear-gradient(left, #f0f0f0, #f5f5f5, #f0f0f0); 
}
hr.style15 {
	border-top: 4px double #f5f5f5;
	text-align: center;
}
hr.style15:after {
	content: '\002665';
	display: inline-block;
	position: relative;
	top: -15px;
	padding: 0 10px;
	background: #f0f0f0;
	color: #f5f5f5;
	font-size: 18px;
}
hr.style16 { 
  border-top: 1px dashed #f5f5f5; 
} 
hr.style16:after { 
  content: '\002702'; 
  display: inline-block; 
  position: relative; 
  top: -12px; 
  left: 40px; 
  padding: 0 3px; 
  background: #f0f0f0; 
  color: #f5f5f5; 
  font-size: 18px; 
}
hr.style17 {
	border-top: 1px solid #f5f5f5;
	text-align: center;
}
hr.style17:after {
	content: '§';
	display: inline-block;
	position: relative;
	top: -14px;
	padding: 0 10px;
	background: #f0f0f0;
	color: #f5f5f5;
	font-size: 18px;
	-webkit-transform: rotate(60deg);
	-moz-transform: rotate(60deg);
	transform: rotate(60deg);
}
hr.style18 { 
  height: 30px; 
  border-style: solid; 
  border-color: #f5f5f5; 
  border-width: 1px 0 0 0; 
  border-radius: 20px; 
} 
hr.style18:before { 
  display: block; 
  content: ""; 
  height: 30px; 
  margin-top: -31px; 
  border-style: solid; 
  border-color: #f5f5f5; 
  border-width: 0 0 1px 0; 
  border-radius: 20px; 
}



<hr class="hr-text" data-content="AND">
<hr class="hr-text" data-content="OR">
 
<style>
.hr-text {
	line-height: 1em;
	position: relative;
	outline: 0;
	border: 0;
	color: black;
	text-align: center;
	height: 1.5em;
	opacity: .5;
}
.hr-text:before {
	content: '';
	background: -webkit-linear-gradient(left, transparent, #818078, transparent);
	background: linear-gradient(to right, transparent, #818078, transparent);
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	height: 1px;
}
.hr-text:after {
	content: attr(data-content);
	position: relative;
	display: inline-block;
	color: black;
	padding: 0 .5em;
	line-height: 1.5em;
	color: #818078;
	background-color: #fcfcfa;
}


<hr class="fade">
<hr class="fade-2">
<hr class="dots">
<hr class="accessory">
 

.fade {
  height: 1px;
  background-image: linear-gradient(
    90deg,
    hsla(0, 0%, 100%, 0),
    hsla(0, 0%, 100%, 0.5) 50%,
    hsla(0, 0%, 100%, 0) 100%);
}
 
.fade-2 {
  border-width: 0 0 1px;
  border-image: linear-gradient(
    90deg,
    hsla(0, 0%, 100%, 0),
    hsla(0, 0%, 100%, 0.5) 50%,
    hsla(0, 0%, 100%, 0) 100%) 0 0 100%;
  border-style: solid;
}
 
.dots {
  border-width: 0 0 8px;
  border-style: solid;
  border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 1"><circle fill="hsla(0, 0%, 65%, 1.0)" cx="1" cy="0.5" r="0.5"/></svg>') 0 0 100% repeat;
   width: 216px;
}
 
.accessory {
  height: 6px;
  background-image: radial-gradient(
    closest-side,
    hsla(0, 0%, 50%, 1.0),
    hsla(0, 0%, 50%, 0) 100%);
  position: relative;
}
.accessory:after {
  position: absolute;
  top:  50%;
  left: 50%;
  display:block;
  background-color: hsl(0, 0%, 75%);
  height: 12px;
  width:  12px;
  transform: rotate(45deg);
  margin-top:  -10px;
  margin-left: -10px;
  border-radius: 4px 0;
  border: 4px solid hsla(0, 0%, 100%, 0.35);
  background-clip: padding-box;
  box-shadow: -10px 10px 0 hsla(0, 0%, 100%, 0.15), 10px -10px 0 hsla(0, 0%, 100%, 0.15);
}

<hr class="pill">
<hr class="vertical-lines">
<hr class="horizontal-lines">
<hr class="slash-1">
 
<style>
.pill {
  height:0px;
  border-radius: 2px;
  border: 2px solid hsl(0, 0%, 60%);
  width: 80%;
}
 
.vertical-lines {
  height: 10px;
  background-image: linear-gradient(
    90deg,
    hsla(0, 0%, 50%, 1),
    hsla(0, 0%, 50%, 1) 33.33%,
    hsla(0, 0%, 50%, 0) 33.33%,
    hsla(0, 0%, 50%, 0) 100%);
  background-size: 3px 100%;
  width: 60%;
}
 
.horizontal-lines {
  height: 10px;
  background-image: linear-gradient(
    hsla(0, 0%, 100%, 1),
    hsla(0, 0%, 100%, 1) 33.33%,
    hsla(0, 0%, 100%, 0) 33.33%,
    hsla(0, 0%, 100%, 0) 100%);
  background-size: 100% 3px;
  width: 40px;
}
 
.slash-1 {
  height: 10px;
  background-image: linear-gradient(-45deg,
    hsla(0, 0%, 70%, 0),
    hsla(0, 0%, 70%, 0) 25%,
    hsla(0, 0%, 70%, 1) 25%,
    hsla(0, 0%, 70%, 1) 50%,
    hsla(0, 0%, 70%, 0) 50%,
    hsla(0, 0%, 70%, 0) 75%,
    hsla(0, 0%, 70%, 1) 75%);
  background-size: 10px 10px;
  width: 250px;