Сокращённые свойства рамок

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

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

Пример(ы):

H1 { border-bottom: thick solid red }

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

H1 { border-bottom: thick solid }

'border'

Свойство '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', не имеет к этому никакого отношения.

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

---

---