Спецификация CSS2

Нет рамки. Форсирует вычисленное значение 'border-width' в '0'.

hidden

То же, что и 'none', за исключением разрешения конфликтов рамок для элементов таблицы.

dotted

Рамка из точек.

dashed

Рамка из пунктирных линий.

solid

Рамка из сплошной линии.

double

Двойная сплошная линия. Сумма двух линий и пространства между ними равна значению 'border-width'.

groove

Рамка выглядит как вырезанная в канве.

ridge

Противоположно 'groove': рамка выглядит как выступающая над канвой.

inset

Весь бокс выглядит вдавленным в канву.

outset

Противоположно 'inset': выпуклый бокс.

Все рамки прорисовываются на поверхности фона бокса. Цвет рамок со значениями 'groove', 'ridge', 'inset' и 'outset' зависит от свойства 'color' элемента.

Соответствующие пользовательские агенты (ПА) HTML могут интерпретировать 'dotted', 'dashed', 'double', 'groove', 'ridge', 'inset' и 'outset' как 'solid'.

'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style'

Значение: | inherit

Начальное: none

Применяется: ко всем элементам

Наследуется: нет

Процентное: N/A

Носитель: визуальный

'border-style'

Значение: {1,4} | inherit

Начальное: см. индивидуальные свойства

Применяется: ко всем элементам

Наследуется: нет

Процентное: N/A

Носитель: визуальный

Свойство 'border-style' устанавливает стиль для четырёх сторон рамки. Может иметь от одного до четырёх значений, и значения устанавливаются для разных сторон, как для 'border-width' выше.

#xy34 { border-style: solid dotted }

В этом примере горизонтальные линии рамки будут 'solid', а вертикальные - 'dotted'.

Поскольку начальное значение стиля рамки - 'none', рамка будет видна только после установки значения стиля.

'border-top', 'border-right', 'border-bottom', 'border-left'

Значение: [ <'border-top-width'> || <'border-style'> || ] | inherit

Начальное: см. индивидуальные свойства

Применяется: ко всем элементам

Наследуется: нет

Процентное: N/A

Носитель: визуальный

Это сокращённое свойство для установки ширины, стиля и цвета верхней, правой, нижней и левой сторон рамки.

H1 { border-bottom: thick solid red }

Это правило устанавливает ширину, стиль и цвет рамки после элемента H1. Опущенные значения установлены в свои начальные значения.

Поскольку нижеследующее правило не специфицирует цвет рамки, рамка будет иметь цвет, определённый свойством 'color':

H1 { border-bottom: thick solid }

'border'

Значение: [ <'border-width'> || <'border-style'> || ] | inherit

Начальное: см. индивидуальные свойства

Применяется: ко всем элементам

Наследуется: нет

Процентное: N/A

Носитель: визуальный

Свойство 'border' - это сокращённое свойство для установки одинаковых значений ширины, цвета и стиля для всех четырёх сторон рамки бокса. В отличие от сокращённых свойств 'margin' и 'padding', свойство 'border' не может устанавливать разные значения для четырёх сторон. Для этого придётся использовать одно или более других свойств.

Первое правило эквивалентно установке четырёх последующих значений:

P { border: solid red } P { border-top: solid red; border-right: solid red; border-bottom: solid red; border-left: solid red }

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

BLOCKQUOTE { border-color: red; border-left: double; color: black }

В приведённом примере цвет левой линии рамки - чёрный, а других линий - красный. Это потому, что в 'border-left' установлены ширина, стиль и цвет. Поскольку значение цвета в свойстве 'border-left' не установлено, оно будет взято из свойства 'color'. Фактически свойство 'color', установленное после свойства 'border-left', не имеет к этому никакого отношения.

Лекция 9. Модель визуального форматирования

Описывается модель визуального форматирования: то как пользовательские агенты обрабатывают дерево документа для визуального носителя.

Эта и последующие главы описывают модель визуального форматирования: то как пользовательские агенты (ПА) обрабатывают дерево документа для визуального носителя.