Границы

Границы могут быть применены к большинству HTML-элементов в теле body.

Всё, что вам нужно, чтобы создать границу вокруг элемента, это свойство border-style. Его значения: solid, dotted, dashed, double, groove, ridge, inset и outset.

Основные стили границ

Свойство border-width задаёт ширину границы, чаще всего используя пиксели в качестве значения.

Существуют также свойства border-top-width, border-right-width, border-bottom-width и border-left-width.

Наконец, border-color устанавливается цвет.

Добавьте следующий код в файл CSS:

h2 {
    border-style: dashed;
    border-width: 3px;
    border-left-width: 10px;
    border-right-width: 10px;
    border-color: red;
}

Это создаст красную пунктирную рамку вокруг всех дополнительных заголовков HTML (элемента h2) шириной 3 пикселя сверху и снизу и шириной 10 пикселей слева и справа (они превышают ширину всей границы в 3 пикселя).

Страницы в тему:

• Следующая страница: Собираем всё это воедино
• Предыдущая страница: Поля и отступы
• Поля и отступы: границы как часть модели Box
• Свойства сокращений: как использовать одно border свойство для включения ширины, цвета и стиля (Продвинутый урок CSS)
• Свойство CSS: border-style
• Свойство CSS: border-width
• Свойство CSS: border-color
• Свойство CSS: border
• Примеры CSS: Границы