Свойства border-top-style, border-right-style, border-bottom-style, border-left-style и border-style

Свойства border-top-color, border-right-color, border-bottom-color, border-left-color и border-color

Свойства border-top-width, border-right-width, border-bottom-width, border-left-width и border-width

Свойства border-top-width, border-right-width, border-bottom-width и определяют толщину соответственно верхней, правой, нижней и левой границ блока. В качестве значений свойства можно задать одно из трех значений: thin – тонкая граница, medium – граница средней толщины (это значение по умолчанию) и thick – толстая граница. Кроме того, толщину границы можно задать с помощью числа в абсолютных или относительных единицах.

Интегральное свойство border-width определяет значения толщину верхней, правой, нижней и левой границ блока (может быть задано от 1 до 4 значений). Это свойство определяет значения ширины аналогично свойству margin для полей блока.

Пример 4.3.56. Задание толщины границы:

1. border-left-width: 10pt – задание для абзаца толщины левой границы в 10 пунктов.

2. border-width: 20px 30px – установка толщины верхней и нижней границы в 20 пикселей, а левой и правой границ – в 30 пикселей.

Свойства border-top-color, border-right-color, border-bottom-color и border-left-color определяют цвет соответственно верхней, правой, нижней и левой границ блока (задание цвета в CSS описано в 4.3.11.3).

В качестве значения по умолчанию используется значение свойства color для данного блока.

Интегральное свойство border-color определяет значения цвета верхней, правой, нижней и левой границ блока аналогично свойству margin для полей блока.

Пример 4.3.56. Задание цвета границы:

1. border-left-color: green – задание для абзаца зеленого цвета границы.

2. border-color: navy navy navy red – установка темно-синего цвета верхней, правой и нижней границы и красного цвета для левой границы.

Помимо значений цвета, свойство border-color может иметь значение transparent (в этом случае граница является прозрачной, хотя она может иметь ширину). В Internet Explorer цвет границы определяется для значения transparent значением рассматриваемого ниже стиля границы, а в остальных Web-браузерах – цветом фона содержимого блока.

Свойства border-top-style, border-right-style, border-bottom-style и border-left-style определяют стиль границы блока и самого блока.

По умолчанию свойства имеют значение "none" (отсутствие границы). Свойства могут иметь также значение "hidden" (скрытая граница). Остальные возможные значения свойств стиля границы приведены в табл. 4.3.8.

Таблица 4.3.8. Допустимые значения свойств стиля границы (для красного цвета границы)

Значение свойства	Стиль	Пример
solid	Сплошная линия
double	Двойная линия
dotted	Пунктирная линия
dashed	Штрихпунктирная линия
groove	Вдавленная линия
ridge	Выпуклая линия
outset	Весь блок выпуклый
inset	Весь блок вдавленный

Все границы выводятся поверх фонового заполнения блока (цветом или изображением). Цвет границ для значений groove, ridge, inset и outset зависит от значения свойства цвета границы.

Поскольку по умолчанию граница не выводится (даже если заданы свойства ширины и цвета границы), для вывода границы надо обязательно задать свойство стиля, со значением, отличным от none и hidden.

Интегральное свойство border-style определяет значения стилей верхней, правой, нижней и левой границ блока аналогично свойству margin для полей блока.

Пример 4.3.58. Задание стиля границы:

1..p1 {margin-left: 5%; border-left-width: 6pt;

border-left-color: green; border-left-style: double} – задание для абзаца класса p1 ширины левого поля в 5% от ширины экрана, толщины левой границы в 6 пунктов, зеленого цвета левой границы со стилем двойная линия.

2..p2 {border-width: 7pt; border-color: blue;

border-style: outset – установка для абзаца класса p2 выпуклого блока с границами синего цвета толщиной 7pt.

Пример вывода Web-страницы для абзацев классов p1 и p2: