Горизонтальна лінія робиться за допомогою властивості border-bottom, яка зазвичай застосовується до елемента <div>. Ця властивість додає лінію знизу заданої товщини та стилю (приклад 1). Щоб не псувати всі <div>, використовуємо клас line, і вже для класу вказуємо властивість border-bottom. Сам <div> залишається порожнім, ніякий вміст у ньому не потрібен, тільки стильове оформлення.
Приклад 1. Використання border-bottom
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Лінія</title> <style> . line { border-bottom: 1px solid #f00; /* Параметри лінії */
}
</style>
</head>
<body> <p>Текст до</p> <div class="line"></div> <p>Текст після</p>
</body>
</html>Результат цього прикладу показаний на рис. 1. Тут ми робимо лінію червоного кольору завтовшки один піксель. Сама лінія при цьому займає всю доступну ширину.
Мал. 1. Вид лінії, створеної через border-bottom