За допомогою тегу <hr> можна намалювати горизонтальну лінію, вигляд якої залежить від атрибутів, що використовуються, а також браузера. Тег відноситься до блокових елементів, тому лінія завжди починається з нового рядка, а після неї всі елементи відображаються на наступному рядку.
Горизонтальна лінія робиться за допомогою властивості border-bottom, яка зазвичай застосовується до елемента <div>. Ця властивість додає лінію знизу заданої товщини та стилю (приклад 1). Щоб не «псувати» все, використовуємо клас line, і вже для класу вказуємо властивість border-bottom. Збережена копія
Для виведення лінії зліва від тексту застосовується властивість border-left, воно створює лінію заданої товщини, стилю та кольору. При цьому висота лінії прив'язується до висоти тексту та змінюється разом із ним. Щоб лінія та фон не прилягали щільно до тексту, відстань від краю до тексту регулюється за допомогою padding.
Щоб створити лінію під текстом, слід додати до елементу стильову властивість border-bottom, його значенням виступає одночасно товщина лінії, її стиль та колір (Приклад 1). Відстань від лінії до тексту можна регулювати властивістю padding-bottom, додаючи його до селектора H1.