Тег  <hr>  или просто линия

Линия. Что может быть проще? Провел карандашом по листу бумаги, получите — линия. Причем эта линия может быть прямой, кривой, волнистой, угловатой, короче — любой. В HTML для того, чтобы нарисовать линию служит тег <hr> .Он создает на странице линию, простую линию, которую разные браузеры отображают по своему (может незначительно отличаться цвет и ширина). Вот пример простой линии.

При необходимости мы можем изменить линию, задав ей нужный цвет и ширину (толщину).

hr{
  border: 0;
  background: #f00;
  height: 3px;
}

Линия с помощью градиента

hr{
  border: 0;
  height: 1px;
  background: #333;
  background-image: linear-gradient(to right, #ccc, #333, #ccc);
}  

Похожа на предыдущую, но края расплываются — сходят на нет

hr {
  border: 0;
  height: 1px;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

Глядя на следующий пример кажется, что достаточно прописать границу элементу и получится тоже самое, но сравните границу этого абзаца и пример линии. Как говорится — найдите отличия.

 hr{
  border: 0;
  border-bottom: 1px dashed #ccc;
  background: #999;
}   

2 варианта с использованием тени

hr {
  height: 12px;
  border: 0;
  box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);
}    

hr {
  border: 0;
  height: 0;
  box-shadow: 0 0 10px 1px black;
}  
hr:after {  
  content: "\00a0";  
}  

Линия с раздвоенным концом

hr {
  height: 30px;
  border-style: solid;
  border-color: black;
  border-width: 1px 0 0 0;
  border-radius: 20px;
}
hr:before { 
  display: block;
  content: "";
  height: 30px;
  margin-top: -31px;
  border-style: solid;
  border-color: black;
  border-width: 0 0 1px 0;
  border-radius: 20px;
}    

Производные от предыдущих вариантов

hr {
  border-top: 5px dashed #8c8b8b;
}    

hr {
  border-top: 10px dotted #8c8b8b;
}    

hr {
  border-top: 10px solid #8c8b8b;
  border-bottom: 10px solid #ccc;
}   

Изображения в линии

hr {
  height: 6px;
  background: url(images/hr-1.png) repeat-x 0 0;
  border: 0;
}    

hr {
  height: 6px;
  background: url(images/hr-2.png) repeat-x 0 0;
  border: 0;
}    

Линия разреза — используется иконочный шрифт

hr{
  border-top: 1px dashed #8c8b8b;
}
hr:after {
  content: '\002702';
  display: inline-block;
  position: relative;
  top: -13.5px;
  left: 40px;
  padding: 0 3px;
  background: transparent;
  color: #8c8b8b;
  font-size: 18px;
}   

Конечно большенство приведенных выше примеров возможно получить прописав, скажем блоку border-bottom: …, но иногда удобней использовать линию как отдельный элемент.