Поиск

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

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

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

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

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

thin

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

medium

Граница средней толщины.

thick

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

<длина>

Толщина границы задается явно. Явные значения ширины границы не могут быть отрицательными.

Интерпретация первых трех значений зависит от агента пользователя. Но при этом всегда должно соблюдаться следующее соотношение:

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

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

'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width' Значение: <border-width> | наследуемое

Начальное значение: средняя толщина
Область применения: все элементы
Наследование: нет
Процентное задание: N/A
Применяется к: устройствам визуального форматирования

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

'border-width'

Значение: <border-width>{1,4} | наследуемое
Начальное значение: см. характерные свойства
Область применения: все элементы
Наследование: нет
Процентное задание: N/A
Применяется к: устройствам визуального форматирования

Это свойство является стенографическим и используется в таблицах стилей для одновременной установки следующих свойств: 'border-top-width', 'border-right-width', 'border-bottom-width' и 'border-left-width'.

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

В следующих примерах в комментариях указаны значения ширины верхней, правой, нижней и левой границ, получившиеся в результате применения правил:
H1 { border-width: thin } /* тонкая тонкая */
/* тонкая тонкая */
H1 { border-width: thin thick } /* тонкая толстая */
/* тонкая толстая */
H1 { border-width: thin thick medium } /* тонкая толстая */
/* средняя толстая */

Цвет границы: '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'
Область применения: все элементы
Наследование: нет
Процентное задание: N/A
Применяется к: устройствам визуального форматирования

'border-color'

Значение: <цвет>{1,4} | transparent | наследуемое
Начальное значение: см. индивидульные свойства
Область применения: все элементы
Наследование: нет
Процентное задание: N/A
Применяется к: устройствам визуального форматирования

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

<цвет>

Значение цвета.

transparent

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

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

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

В следующем примере граница представляется сплошной черной линией.

P {
color: black;
background: white;
border: solid;
}
Стиль границы: 'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style' и 'border-style'

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

none

Граница отсутствует. В результате вычисленное значение свойства 'border-width' будет равно нулю.

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

'border-style'

Значение: <border-style>{1,4} | наследванное
Начальное значение: см. индивидуальные свойства
Область применения: всем элементам
Наследование: нет
Процентное задние: N/A
Применяется к: устройствам визуального форматирования

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

#xy34 { border-style: solid dotted }

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

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

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

Значение: [ <'border-top-width'> || <'border-style'> || <цвет> ] | наследованное
Начальное значение: см. индивидуальные свойства
Область применения: все элементы
Наследование: нет
Процентное задание: N/A
Применяется к: устройствам визуального форматирования

Данное свойство является стенографическим свойством для настроек ширины, стиля и цвета для верхнего, правого, нижнего и левого сегментов границы блока.

H1 { border-bottom: thick solid red }

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

H1 { border-bottom: thick solid } 'border'

Значение: [ <'border-top-width'> || <'border-style'> || <color> ] | наследованное
Начальное значение: см. индивидуальные свойства
Область применения: все элементы
Наследование: нет
Процентное задание: 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', в данном случае не имеет особого значения.