О спецификации CSS2 том 2

       

Сокращённые свойства рамок 'bordertop' 'borderbottom' 'borderright' 'borderleft' и 'border'



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
Начальное:см. индивидуальные свойства
Применяется:  ко всем элементам
Наследуется:нет
Процентное:N/A
Носитель:визуальный

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

Пример(ы):

H1 { border-bottom: thick solid red }

Это правило устанавливает ширину, стиль и цвет рамки после элемента H1. Опущенные значения установлены в свои начальные значения. Поскольку нижеследующее правило не специфицирует цвет рамки, рамка будет иметь цвет, определённый свойством 'color': H1 { border-bottom: thick solid } 'border'


Значение:[ <'border-width'> || <'border-style'> || <color> ] | 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', не имеет к этому никакого отношения.



Содержание раздела