Граница блока

С границей связаны три свойства:

• Width - может иметь значения thin, medium, thick или числовое значение в любых единицах (em, px, % и т.д.);
• Style - может иметь значения none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset;
• Color - позволяет указать цвет в любом формате (RGB, шестиадцатеричный формат или ключевое слово).

Можно за один раз задать свойства границы блока для всех четырех сторон:

р {border-style: solid;}

или только для одной стороны:

p {border-left-style: solid;}

Либо можно использовать сокращенный формат записи и указать четыре различных стиля для каждой из сторон за один раз:

P {border-style: solid dashed double inset}

При этом порядок сторон таков: верхняя, правая, нижняя, левая. Однако маловероятно, что вам потребуется задать различные стили границ для каждой стороны, потому что разные границы сторон одного блока выглядят довольно странно. С другой стороны, довольно часто для всех сторон указываются границы одного типа и цвета, но с разной толщиной. В таком случае достичь желаемого результата можно с помощью двух правил. В следующем примере первое правило отвечает за общие стили для всех четырех сторон, а второе указывает различия между ними:

h2.headbox {border: solid #AAA; padding: 2px;}

h2.headbox {border-width:3px 1px 1px 3px;}

Во втором правиле соблюден следующий порядок сторон при задании ширины границ: верхняя, правая, нижняя, левая.

Обычно же граница рамки задается одинаковой со всех сторон, для чего достаточно одного правила:

p.warning {border: 4px solid #3FF) /*добавляет толстую красную рамку вокруг абзаца*/

В ходе разработки страницы довольно полезно включить отображение границ, чтобы четко видеть структуру документа и применяемые стили (в том числе поля и отступы). По умолчанию толщина границы задана как medium, border-style имеет значение none, а цвет рамки - black. При этом граница не видна, и все что требуется сделать для ее отображения - написать правило:

p {border:solid}

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