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