hr

<hr> (ang. horizontal rule)

<hr>

<hr>

hr {
	border-width: 40px;
}

<hr>

hr {
	height: 40px;
}

Domyślne wartości css

Większość przeglądarek wyświetla element <hr> z następującymi wartościami domyślnymi:

hr {
	display: block;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	margin-left: auto;
	margin-right: auto;
	border-style: inset;
	border-width: 1px;
}

Przykłady <hr>

<hr>

.hr1 hr {
	height: 15px;
	border: 1px solid #fff;
}

<hr>

.hr2 hr {
	height: 15px;
	border: 3px solid #FF5733;
}

<hr>

.hr3 hr {
	height: 15px;
	background: #FF5733;
	border: none;
}

<hr>

.hr4 hr {
	height: 15px;
	background: #FF5733;
	border: 3px solid #fff;
}

<hr>

.hr5 hr {
	height: 35px;
	background: url(images/mur-bialy.jpg) no-repeat;
	border: 3px solid #fff;
}

Przykłady <hr> class

<hr class="style1">

hr.style1 {
    border-top: 10px solid #8c8b8b;
    border-bottom: none;
}

<hr class="style2">

hr.style2 {
    border-top: 10px dashed #8c8b8b;
    border-bottom: none;
}

<hr class="style3">

hr.style3 {
    border-top: 10px dotted #8c8b8b;
    border-bottom: none;
}

<hr class="style4">

hr.style4 {
    border-top: 10px double #8c8b8b;
    border-bottom: none;
}

<hr class="style5">

hr.style5 {
	border-top: 10px solid #8c8b8b;
	border-bottom: 10px solid #fff;
}

<hr class="style6">

hr.style6 {
	border-top: 10px dashed #8c8b8b;
	border-bottom: 10px dashed #fff;
}

<hr class="style7">

hr.style7 {
	border-top: 10px dotted #8c8b8b;
	border-bottom: 10px dotted #fff;
}

<hr class="style8">

hr.style8 {
	border-top: 10px double #8c8b8b;
	border-bottom: 10px double #fff;
}

<hr> ciekawe przykłady

<hr>

.hr6 hr {
	background: none;
	border: none;
	border-top: 10px double #fff;
	overflow: visible;
	text-align: center;
}

.hr6 hr:after {
	background: #232323;
	content: '§';
	padding: 0 10px;
	font-size: 50px;
	position: relative;
	top: -44px;
}

<hr>

.hr7 hr {
	border: none;
}

.hr7 hr:before {
	content: '***';
	display: block;
	text-align: center;
	letter-spacing: 13px;
	font-size: 40px;
}