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;
}

W3S – HTML <hr> Tag

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> ciekawy przykład

<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;
    position: relative;
    line-height: 100%;
    top: -30px;	
    font-size: 60px;
}