Стили css для горизонтальных линий

Как красиво отделить в статье одну часть текста от другой? 

Для этого используют элемент hr. 

Тег hr задает разделительную горизонтальную линию. 

Линиями hr со стилями на css можно сделать очень красивые разделители. Можно сделать линии с тенями, с добавлением картинок, анимированные, с hover эффектами, градиентные, с зубчиками, разной толщины и так далее. 

Где ещё можно использовать тег <hr>? 

К примеру, вместо подчёркивания заголовка.Правда, подчёркивание будет с новой строки, но может кому-то это понравится. Можно каждую строку в списке отделить этой линией.

Подробнее о тег <hr> в сегодняшней статье.

Линии CSS

Линия слева

---

<hr width=100 align="left">

Линия с права

---

 <hr width=100 align="right"> 

Линия справа и слева цветные

<hr color="#0e5198"width=100 align="right">
<hr color="#6664b2"width=100 align="left">

Вертикальная линия

<hr noshade align="center" width="3" size="50">  

Вертикальная линия слева

---

<hr noshade align="left" width="1" size="60">

Вертикальная линия справа

---

<hr noshade align="right" width="1" size="60">

Простая линия

<hr class="hr-line" />
<style>
.hr-line {
margin: 20px 0;
padding: 0;
height: 0;
border: none;
border-top: 1px solid #333;
}
</style>

Двойная линия

<hr class="hr-double">
<style>
.hr-double {
margin: 20px 0;
padding: 0;
height: 1px;
border: none;
border-top: 1px solid #333;
border-bottom: 1px solid #333;
}
</style>

Многострочная линия

<hr class="hr-multiline">
<style>
.hr-multiline {
margin: 20px 0;
padding: 0;
height: 20px;
border: none;
color: #333;
background-image: linear-gradient(currentColor, currentColor 33.33%, transparent 33.33%, transparent 100%);
background-size: 100% 3px;
}
</style>

Градиентная чёрная

<hr class="style-one">
<style>hr.style-one {
border: 0;
height: 1px;
background: #333;
background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc);
background-image: -moz-linear-gradient(left, #ccc, #333, #ccc);
background-image: -ms-linear-gradient(left, #ccc, #333, #ccc);
background-image: -o-linear-gradient(left, #ccc, #333, #ccc);
}</style>

Тонкая линия

<div class="style-five">
</div>
<hr class="style-five" />
<style>div.style-five {
height: 75px;
background: #fff url(image/cartoon.png) no-repeat scroll left;
background-size: 80px 75px;
margin-left: -40px;
}
hr.style-five
{
width: 95%;
margin-top: -40px;
border: 0;
border-bottom: 1px dashed black;
background: #70A8FF;
}</style>

Линия скобка

<hr class="style-three" />
<style>
hr.style-three {
height: 30px;
border-style: solid;
border-color: black;
border-width: 1px 0 0 0;
border-radius: 20px;
}
hr.style-three:before {
display: block;
content: "";
height: 30px;
margin-top: -31px;
border-style: solid;
border-color: black;
border-width: 0 0 1px 0;
border-radius: 20px;
}</style>

Пунктирная двойная линия рамкой

<hr class="style-seven" />
<style>hr.style-seven {
height:8px;
border: 2px dashed #999;
}</style>

Градиент 2

<hr class="style-volna" />
<style>
hr.style-volna {
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
}</style>

Тень

<hr class="style-volna2" />
<style>
hr.style-volna2 {
    height: 12px;
    border: 0;
    box-shadow: inset 0 12px 12px -12px rgba(0,0,0,0.5);
}
</style>

Размытие

<hr class="style-volna3" />
<style>
hr.style-volna3 {
    border: 0;
    height: 0; /* Firefox... */
    box-shadow: 0 0 10px 1px black;
}
hr.style-five:after {
    content: "\00a0";
}</style>

Двухцветная линия

<hr class="hr-two-color">
<style>
.hr-two-color {
margin: 20px 0;
padding: 0;
height: 0;
border: none;
border-top: 2px solid #ddd;
border-bottom: 2px solid #000;
}
</style>

Наклонная линия

<hr class="hr-inclined-left">
<style>
.hr-inclined-left {
margin: 25px 0 40px 0;
padding: 0;
height: 0;
border: none;
border-top: 1px solid #333;
transform:rotate(2deg);
} </style>

Наклонная линия 2

<hr class="hr-inclined-right">
<style>
.hr-inclined-right {
margin: 25px 0 40px 0;
padding: 0;
height: 0;
border: none;
border-top: 1px solid #333;
transform:rotate(-2deg);
} </style>

Трёхцветная линия

<hr class="hr-three-color">
<style>
.hr-three-color {
margin: 20px 0;
padding: 0;
height: 2px;
border: none;
border-top: 2px solid #ddd;
border-bottom: 2px solid #000;
background: mediumpurple;
}
</style>

Градиент

<hr class="hr-horizontal-gradient">
<style>
.hr-horizontal-gradient {
margin: 20px 0;
padding: 0;
height: 6px;
border: none;
background: linear-gradient(45deg, #333, #ddd);
}
</style>

Вертикальные линии

<hr class="hr-vertical-lines">
<style>
.hr-vertical-lines {
margin: 20px 0;
padding: 0;
height: 10px;
border: none;
color: orange;
background-image: linear-gradient(90deg, orange, orange 33.33%, transparent 33.33%, transparent 100%);
background-size: 3px 100%;
}
</style>

Вертикальный градиент

<hr class="hr-vertical-gradient">
<style>
.hr-vertical-gradient {
margin: 20px 0;
padding: 0;
height: 10px;
border: none;
background: linear-gradient(180deg, orange, blue);
}
</style>

Пунктир градиентный

<hr class="hr-dashed-gradient">
<style>
.hr-dashed-gradient {
margin: 20px 0;
padding: 0;
height: 2px;
border: none;
background: linear-gradient(to right, transparent 50%, #fff 50%),
linear-gradient(to right, blue, red);
background-size: 16px 2px, 100% 2px;
}
</style>

Линия с тенью

<hr class="hr-shelf">
<style>
.hr-shelf {
margin: -30px auto 10px;
padding: 0;
height: 50px;
border: none;
border-bottom: 1px solid #1f1209;
box-shadow: 0 20px 20px -20px #333;
width: 95%;
}
</style>

Линия с тенью 2

<hr class="hr-shadow">
<style>
.hr-shadow {
margin: 20px 0;
padding: 0;
height: 10px;
border: none;
border-top: 1px solid #333;
box-shadow: 0 10px 10px -10px #8c8b8b inset;
}
</style>

Голубая линия 

<hr class="style-eight" />
<style>hr.style-eight {
height: 10px;
border: 1;
box-shadow: inset 0 9px 9px -3px rgba(11, 99, 184, 0.8);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}</style>

Зигзаг

<hr class="hr" />
<style>
hr{
  border: none;
  height: 10px;
  background: linear-gradient(-135deg, #fff 5px, transparent 0) 0 5px, linear-gradient(135deg, #fff 5px, #8c8c8c 0) 0 5px;
  background-color: #fff;
  background-position: left bottom;
  background-repeat: repeat-x;
  background-size: 10px 10px;
}
</style>

Можно менять в кодах цвет — выделила красным. Если есть желание, то можно и размеры
линии — выделила синим.
Что ещё можно менять в стилях:
align - выравнивание линии.
color - цвет линии.
size - толщина линии.
width - ширина линии.
noshade - рисует линию без трехмерных эффектов

Пунктирная с фоном

<div class="style-five"></div>
<hr class="style-five">
<style>div.style-five {
height: 75px;
background: #fff url(image/cartoon.png) no-repeat scroll left;
background-size: 80px 75px;
margin-left: -40px;
}
hr.style-five
{
width: 95%;
margin-top: -40px;
border: 0;
border-bottom: 1px dashed black;
background: #70A8FF;
}</style>

Косые штрихи

<hr class="hr-sloping-lines">
<style>
.hr-sloping-lines {
margin: 20px 0;
padding: 0;
height: 10px;
border: none;
box-sizing: border-box;
background-position: 50%;
color: orange;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="3px" height="3px" viewBox="0 0 3 3" fill="orange"><polygon points="0,0.5 0,1.5 1.5,3 2.5,3"></polygon><polygon points="2.5,0 1.5,0 3,1.5 3,0.5"></polygon></svg>');
background-size: 6px 6px;
}
</style>

Анимированная волна

<hr class="hr" />
<style>
hr {
  border: none;
  margin: 30px 0;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='rgb(51, 122, 183)' stroke-width='1' class='squiggle' d='M0,3.5 c 5,0,5,-2,10,-2 s 5,2,10,2 c 5,0,5,-2,10,-2 s 5,2,10,2'/%3E%3C/svg%3E");
  background-position: 0 100%;
  background-repeat: repeat-x;
  padding-bottom: 4px;
  background-size: auto 4px;
}
</style>

Бегущая жёлтая полоска 

<hr class="hr " />
<style>
hr {
  margin: 30px 0;
  border: 2px solid #cab9f0;
  position: relative;
  overflow: visible;
}
hr:after {
  content: "";
  border: 2px solid #ffff03;
  position: absolute;
  width: 20%;
  top: -2px;
  animation: anim-hr 5s linear infinite;
}
@keyframes anim-hr {
  0% {
  left: -20%;
  }
  100% {
  left: 100%;
  }
}
</style>

Линии крупными точками

<hr class="hr-circle">

<style>
.hr-circle {
margin: 20px 0;
padding: 0;
height: 0;
border: none;
border-width: 0 0 5px;
border-style: solid;
border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 1" width="8" height="4"><circle fill="slateblue" cx="1" cy="0.5" r="0.5"></circle></svg>') 0 0 100% repeat;
background-position: 50%;
box-sizing: border-box;
color: slateblue;
}
</style>

Картинка

<div class="hr"><hr /></div>
<style>
div.hr {
  height: 40px;
  background: #fff url(ваша картинка) no-repeat scroll center;
}
div.hr hr {
  display: none;
}
</style>

Вставить картинку можно любую, на прозрачном фоне. Но нужно будет подобрать высоту (height) для неё. Выделила в коде синим.

Пульсирующая линия

<div class="hr"><hr /></div>
<style>
hr {
    border: none;
    height: 3px;
    margin: 40px 0;
    background-image: linear-gradient(to right, #FFF, #BFE2FF, #FFF);
}
hr:before,
hr:after {
    content: '';
    display: inline-block;
    border-radius: 100%;
    width: 40px;
    height: 40px;
    border: 2px solid #BFE2FF;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #FFF;
}
hr:after {
    animation: anim-hr 1s linear infinite;
}
@keyframes anim-hr {
    0% {
        width: 40px;
        height: 40px;
    }
    100% {
        width: 0;
        height: 0;
    }
}
</style>