↓デフォルト
<hr class="hr_a">
↓シャドウ付き
<hr class="hr_b">
↓フルワイド
<hr class="hr_c">
↓両端フェードアウト
<hr class="hr_d">
↓縦ストライプ
<hr class="hr_e">
↓横ストライプ
<hr class="hr_f">
↓斜めストライプ
<hr class="hr_g">
↓テキスト入り
<hr class="hr_h">
↓グラデーション
<hr class="hr_i">
↓長方形
<hr class="hr_j">
↓ギザギザ
<hr class="hr_k">
body {
	background-color: #fff;
	max-width: 500px;
	margin: 1.35em auto;
	box-sizing: border-box;
	overflow-x: hidden;
}
.hr_b {
	height: 8px;
	border: 0;
	box-shadow: 0 8px 8px -8px #666 inset;
}
.hr_c {
	position: relative;
	width: 100vw;
	margin: 10px 0 10px -50vw;
	left: 50%;
}
.hr_d {
	border: 0;
	height: 1px;
	background-image: -webkit-linear-gradient(left, #f0f0f0, #666, #f0f0f0);
	background-image: linear-gradient(left, #f0f0f0, #666, #f0f0f0);
}
.hr_e {
	border: 0;
	height: 8px;
	background-image: linear-gradient(
		90deg,
		currentColor 33.33%,
		transparent 33.33%,
		transparent 100%
	);
	background-size: 3px 100%;
}
.hr_f {
	border: 0;
	height: 8px;
	background-image: linear-gradient(
		currentColor 33.33%,
		transparent 33.33%,
		transparent 100%
	);
	background-size: 100% 3px;
}
.hr_g {
	border: 0;
	height: 8px;
	background-image: linear-gradient(
		-45deg,
		transparent,
		transparent 25%,
		currentColor 25%,
		currentColor 50%,
		transparent 50%,
		transparent 75%,
		currentColor 75%
	);
	background-size: 8px 8px;
}
.hr_h {
	height: 1px;
}
.hr_h::after {
	content: "text";
	display: inline-block;
	position: absolute;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 1rem;
	background-color: #fff;
}
.hr_i {
	border: 0;
	height: 1px;
	background-image: linear-gradient(to right, red, orange, yellow, blue, green);
}
.hr_j {
	height: 8px;
	border: 1px solid #666;
}
.hr_k {
	border: none;
	height: 10px;
	background: linear-gradient(-135deg, #666 5px, transparent 0) 0 5px,
		linear-gradient(135deg, #666 5px, #fff 0) 0 5px;
	background-color: #666;
	background-position: left bottom;
	background-repeat: repeat-x;
	background-size: 10px 10px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.