Как сделать линию в css

Узнайте, как в CSS легко создать горизонтальную или вертикальную линию разных толщин и цветов с примером длиной в несколько пикселей.

Линия в CSS

Линия в CSS может быть добавлена с помощью тега <hr>. Тег <hr> выглядит так:

<hr>

Также можно использовать правило CSS border, чтобы добавить линию, установив его свойство border-top или border-bottom. Например:

<div style="border-top: 1px solid #000;"></div>

Это правило позволяет настроить размер, цвет и тип линии. Например, ниже показано правило с двумя различными типами линии:

<div style="border-top: 1px dotted #000; border-bottom: 2px dashed #777;"></div>

Линия может быть добавлена и к существующему элементу, используя правило border. Например:

<p style="border-top: 1px solid #000;">Lorem ipsum dolor sit amet.</p>

В CSS есть также правило outline, которое можно использовать для создания линии вокруг элемента. Например:

<p style="outline: 1px solid #000;">Lorem ipsum dolor sit amet.</p>

Отличие правила border и outline заключается в том, что outline не занимает места в разметке, поэтому не влияет на размер элемента. Оба правила могут быть использованы для создания линий различного размера, цвета и типа.