8.5. Свойства границ.

Свойства границ определяют ширину, цвет и стиль области границ в блоке. Эти свойства применяются ко всем элементам.

Обратите внимание. Исключительно для HTML, устройства вывода могут визуализировать границы для определенных элементов (например, кнопки, меню и т.д.) не так, как для "ординарных" элементов.

8.5.1 Ширина границы: 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width' и 'border-width'

Свойства ширины границы определяет ширину области границы. Свойства, описанные в этом разделе, ссылаются к типам величина <border-width>, который может принимать следующие значения:

thin

Тонкая граница.

medium

Средняя граница.

thick

Толстая граница.

<length>

Толщина границы имеет определенное значение. Ширина границы не может быть отрицательной.

Интерпретация первых трех значений зависит от устройства вывода, но должны поддерживаться следующие взаимосвязи:

'thin' <= 'medium' <='thick'.

Более того, установленная ширина должны быть постоянной на протяжении всего документа.

'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width' 
Тип значения:              <border-width> | inherit
Начальная величина:   medium
Применяется:               ко всем элементам
Наследование:             нет
Процентная база:         нет
Медиа:                        визуальные

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

'border-width'
Тип значения:                 <border-width>{1,4} | inherit
Начальная величина:     смотри индивидуальные свойства
Применяется:                 ко всем элементам
Наследование:               нет
Процентная база:           нет
Медиа:                           визуальные

Это свойство является сокращенным свойством для установки 'border-top-width', 'border-right-width', 'border-bottom-width' и 'border-left-width' в одном и том же месте стилевой таблице.

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

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

H1 { border-width: thin }                   /* thin thin thin thin */
H1 { border-width: thin thick }             /* thin thick thin thick */
H1 { border-width: thin thick medium }      /* thin thick medium thick */

8.5.2 Цвет границы: 'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color' и 'border-color'

Свойства цвета границы определяют цвет границы блока.

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

Тип значения:               <color> | inherit
Начальная величина:   значение свойства 'color'
Применяется:               ко всем элементам
Наследование:             нет
Процентная база:         нет
Медиа:                         визуальные

'border-color' 
Тип значения:                <color>{1,4}| transparent | inherit
Начальная величина:     смотри индивидуальные свойства
Применяется:                ко всем элементам
Наследование:               нет
Процентная база:           нет
Медиа:                           визуальные

Свойство 'border-color' устанавливает цвет четырех границ. Значения имеют следующие значения.

<color>

Определяет значение цвета.

transparent

Граница прозрачная (хотя она может иметь ширину).

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

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

В следующем примере, граница будет обычной черной линией.

P { 
  color: black; 
  background: white; 
  border: solid;
}

8.5.3 Стиль границы: 'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style' и 'border-style'

Стилевые свойства границ определяют стиль линии границы блока (обычная, двойная, штриховая и т.д.). Свойства, описанные в этом разделе, ссылаются к типу значения <border-style>, который принимает следующие значения:

none (линия отсутствует)

Нет границы. Это значение приводит к тому, что рассчитанное значение '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' 
Тип значения:              <border-style> | inherit
Начальная величина:   нет
Применяется:               ко всем элементам
Наследование:             нет
Процентная база:         нет
Медиа:                         визуальные

'border-style' 
Тип значения:             <border-style>{1,4} | inherit
Начальная величина:  смотри индивидуальные свойства
Применяется:             ко всем элементам
Наследование:            нет
Процентная база:        нет
Медиа:                        визуальные

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

#xy34 { border-style: solid dotted }

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

Поскольку начальное значение стилей границы – 'none', то границы не будут видны до тех пор, пока не будет установлен их стиль.

8.5.4 Сокращенные свойства границы: 'border-top', 'border-bottom', 'border-right', 'border-left' и 'border'

'border-top', 'border-right', 'border-bottom', 'border-left' 
Тип значения:              [<'border-top-width'> || <'border-style'> || <color> ]| inherit
Начальная величина: смотри индивидуальные свойства
Применяется:             ко всем элементам
Наследование:            нет
Процентная база:        нет
Медиа:                        визуальные

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

H1 { border-bottom: thick solid red }

Вышеуказанное правило устанавливает ширину, стиль и цвет для границы под элементом Н1. Опущенные значения устанавливаются по их начальным значениям. Так как следующее правило не определяет цвет границы, то граница будет иметь цвет, определенный свойством 'color':

H1 { border-bottom: thick solid }

'border' 
Тип значения:              [<'border-width'> || <'border-style'> || <color> ]| inherit
Начальная величина:  смотри индивидуальные свойства
Применяется:             ко всем элементам
Наследование:            нет
Процентная база:        нет
Медиа:                        визуальные

Свойство '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', не является существенным.