border

Описание
Параметр позволяет одновременно установить толщину, стиль и цвет рамки вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному атрибуту. Для установки рамки только на определенных сторонах элемента, воспользуйтесь параметрами border-top, border-bottom, border-left, border-right.

Синтаксис
border: border-width || border-style || color

Аргументы
Значение border-width определяет толщину рамки. Для управления видом рамки предоставляется восемь значений параметра border-style. Их названия и результат действия представлен на рис. 1.

Рис.1. Стили рамок

Аргумент color устанавливает цвет рамки, значение может быть в любом допустимом для CSS формате.

Пример
border: 4px double black; /* Параметры границы */

border-bottom

Описание
Параметр позволяет одновременно установить толщину, стиль и цвет границы внизу элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному атрибуту.

Синтаксис
border-bottom: border-width || border-style || color

Аргументы
Значение border-width определяет толщину рамки. Для управления видом рамки предоставляется восемь значений параметра border-style. Их названия и результат действия представлен на рис. 1.

Рис.1. Стили рамок

Первые два стиля — dotted и dashed поддерживаются браузером Internet Explorer с версии 5.5.
Аргумент color устанавливает цвет рамки, значение может быть в любом допустимом для CSS формате.

Пример
border-bottom: 2px solid white; /* Параметры линии внизу */

border-bottom-color

Описание
Устанавливает цвет границы внизу элемента.

Синтаксис
border-bottom-color: цвет

Аргументы
Цвет можно задавать тремя способами.
1. По его названию
Браузеры поддерживают некоторые цвета по их названию.

2. По шестнадцатеричному значению
Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних — зеленую, а два последних — синюю. Допускается использовать сокращенную форму вида #rgb, где каждый символ следует удваивать. Так, запись #fe0 следует расценивать как #ffee00.

3. С помощью RGB
Можно определить цвет используя значения красной, зеленой и синей составляющей в десятичном исчислении. Значение каждого из трех цветов может принимать значения от 0 до 255. Также можно задавать цвет в процентном отношении.

Пример
border-bottom-color: white; /* Цвет линии внизу */

border-bottom-style

Описание
Устанавливает стиль границы внизу элемента.

Синтаксис
border-bottom-style: стиль

Аргументы
Для управления видом рамки предоставляется восемь значений параметра border-bottom-style. Их названия и результат действия представлен на рис. 1.

Рис.1. Стили рамок

Пример
border-bottom-style: solid; /* Стиль линии внизу */

border-bottom-width

Описание
Устанавливает толщину границы внизу элемента.

Синтаксис
border-bottom-width: thin | medium | thick | значение

Аргументы
Три переменные — thin (2 пиксела), medium (4 пиксела) и thick (6 пикселов) задают толщину границы внизу. Для более точного значения, толщину можно указывать в пикселах или других единицах.

Пример
border-bottom-width: 7px; /* Толщина линии внизу текста */

border-color

Описание
Устанавливает цвет границы на разных сторонах элемента. Параметр позволяет задать цвет границы сразу на всех сторонах элемента или определить цвет границы только на указанных сторонах.

Синтаксис
border-color: color {1,4}

Аргументы
Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом.

Пример
H1 {
border-color: red white; /* Цвет границы */
}
P {
border-color: #008a77; /* Цвет границы */
}

border-left

Описание
Параметр позволяет одновременно установить толщину, стиль и цвет левой границы элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному атрибуту.

Синтаксис
border-left: border-width || border-style || color

Аргументы
Значение border-width определяет толщину рамки. Для управления видом рамки предоставляется восемь значений параметра border-style. Их названия и результат действия представлен на рис. 1.

Рис.1. Стили рамок

Первые два стиля — dotted и dashed поддерживаются браузером Internet Explorer с версии 5.5.
Аргумент color устанавливает цвет рамки, значение может быть в любом допустимом для CSS формате.

Пример
border-left: 2px dotted green; /* Линия слева от текста */

border-left-color

Описание
Задает цвет границы слева от элемента.

Синтаксис
border-left-color: цвет

Аргументы
Цвет можно задавать тремя способами.

Пример
border-left-color: #fc0; /* Цвет линии слева */

border-left-style

Описание
Устанавливает стиль границы слева от элемента.

Синтаксис
border-left-style: стиль

Аргументы
Для управления видом рамки предоставляется восемь значений параметра border-left-style. Их названия и результат действия представлен на рис. 1.

Рис.1. Стили рамок

Пример
border-left-style: double; /* Стиль линии */

border-left-width

Описание
Устанавливает толщину границы слева от элемента.

Синтаксис
border-left-width: thin | medium | thick | значение

Аргументы
Три переменные — thin (2 пиксела), medium (4 пиксела) и thick (6 пикселов) задают толщину границы слева. Для более точного значения, толщину можно указывать в пикселах или других единицах.

Пример
border-left-width: thick; /* Толщина линии */

border-right

Описание
Параметр позволяет одновременно установить толщину, стиль и цвет правой границы элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному атрибуту.

Синтаксис
border-right: border-width || border-style || color

Аргументы
Значение border-width определяет толщину рамки. Для управления видом рамки предоставляется восемь значений параметра border-style. Их названия и результат действия представлен на рис. 1.

Рис.1. Стили рамок

Первые два стиля — dotted и dashed поддерживаются браузером Internet Explorer с версии 5.5.
Аргумент color устанавливает цвет рамки, значение может быть в любом допустимом для CSS формате.

Пример
border-right: 1px solid red; /* Линия справа от текста */

border-right-color

Описание
Задает цвет границы справа от элемента.

Синтаксис
border-right-color: цвет

Аргументы
Цвет можно задавать тремя способами.

Пример
border-right-color: navy; /* Цвет линии справа */

border-right-style

Описание
Устанавливает стиль границы справа от элемента.

Синтаксис
border-right-style: стиль

Аргументы
Для управления видом рамки предоставляется восемь значений параметра border-right-style. Их названия и результат действия представлен на рис. 1.

Рис.1. Стили рамок

Пример
border-right-style: dotted; /* Стиль линии */

border-right-width

Описание
Устанавливает толщину границы справа от элемента.

Синтаксис
border-right-width: thin | medium | thick | значение

Аргументы
Три переменные — thin (2 пиксела), medium (4 пиксела) и thick (6 пикселов) задают толщину границы справа. Для более точного значения, толщину можно указывать в пикселах или других единицах.

Пример
border-right-width: 2px; /* Толщина линии */

border-style

Описание
Устанавливает стиль рамки вокруг элемента. Допустимо задавать индивидуальные стили для разных сторон элемента.

Синтаксис
border-style: dotted |dashed |solid |double |groove |ridge |inset |outset

Аргументы
Для управления видом рамки предоставляется восемь значений параметра border-style. Вид рамки зависит от используемого браузера и заданной толщины границы.

Пример

P {
border-style: double; /* Стиль линии вокруг параграфа */
padding: 5px; /* Поля вокруг текста */
}

border-top

Описание
Параметр позволяет одновременно установить толщину, стиль и цвет границы сверху элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному атрибуту.

Синтаксис
border-top: border-width || border-style || color

Аргументы
Значение border-width определяет толщину рамки. Для управления видом рамки предоставляется восемь значений параметра border-style. Их названия и результат действия представлен на рис. 1.

Рис.1. Стили рамок

Первые два стиля — dotted и dashed поддерживаются браузером Internet Explorer с версии 5.5.
Аргумент color устанавливает цвет рамки, значение может быть в любом допустимом для CSS формате.

Пример
border-top: 1px solid red; /* Линия сверху текста */

border-top-color

Описание
Задает цвет границы сверху элемента.

Синтаксис
border-top-color: цвет

Аргументы
Цвет можно задавать тремя способами.

Пример
border-top-color: #ccc; /* Цвет линии сверху */

border-top-style

Описание
Устанавливает стиль границы сверху элемента.

Синтаксис
border-top-style: стиль

Аргументы
Для управления видом рамки предоставляется восемь значений параметра border-top-style. Их названия и результат действия представлен на рис. 1.

Рис.1. Стили рамок

Пример
border-top-style: double; /* Стиль линии сверху */

border-top-width

Описание
Устанавливает толщину границы сверху элемента.

Синтаксис
border-top-width: thin | medium | thick | значение

Аргументы
Три переменные — thin (2 пиксела), medium (4 пиксела) и thick (6 пикселов) задают толщину границы слева. Для более точного значения, толщину можно указывать в пикселах или других единицах.

Пример
border-top-width: 7px; /* Толщина линии сверху */

border-width

Описание
Задает толщину границы одновременно на всех сторонах элемента или индивидуально для каждой стороны. Способ изменения толщины зависит от числа аргументов.

Синтаксис
border-width: thin | medium | thick | значение

Аргументы
Три переменные — thin (2 пиксела), medium (4 пиксела) и thick (6 пикселов) задают толщину границы. Для более точного значения, толщину можно указывать в пикселах или других единицах. Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества аргументов.

Пример
border-width: 3px 7px 7px 4px; /* Толщина границы */

outline

Описание
Универсальный атрибут, одновременно устанавливающий цвет, стиль и толщину внешней границы на всех четрырех сторонах элемента. В отличие от линии, задаваемой через border, атрибут outline не влияет на положение блока и его ширину.

Синтаксис
outline: outline-color || outline-style || outline-width

Значения
outline-color
Задает цвет линии в любом допустимом для CSS формате.

outline-style
Стиль линии.

outline-width
Толщина границы.

Пример
outline: 1px solid #666; /* Параметры рамки */

outline-color

Описание
Задает цвет внешней границы элемента. В отличие от линии, задаваемой через border, линия через атрибут outline отображается вокруг элемента, не влияя на ширину блока или его положение.

Синтаксис
outline-color: invert | цвет

Значения
invert
Автоматически задает цвет линии, исходя из фона под ней для достижения максимального контраста. В CSS 2.1 браузеру разрешается игнорировать значение invert и вместо него использовать цвет линии заданный атрибутом color.

цвет
Задает цвет линии в любом допустимом для CSS формате.

Пример
outline-color: #be8b5e; /* Цвет границы */

outline-style

Описание
Задает стиль внешней границы элемента. В отличие от линии, задаваемой через border, линия через outline отображается вокруг элемента, не влияя на ширину блока или его положение.

Синтаксис
outline-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset

Значения
none
Граница не отображается. Это значение перекрывает атрибут outline-width, если он присутствует.

dotted
Линия состоящая из набора точек.

dashed
Пунктирная линия, состоящая из серии коротких отрезков.

solid
Сплошная линия.

double
Двойная линия.

groove
Создает эффект вдавленной рамки.

ridge
Создает эффект рельефной границы.
Вид указанных стилей представлен на рис. 1.

Рис. 1. Вид границы с разным значением стилей

Пример
outline-style: none; /* Убираем границу вокруг ссылок */

outline-width

Описание
Задает толщину внешней границы элемента. В отличие от атрибута border-width, для outline-width нельзя устанавливать границу для каждой стороны элемента индивидуально.
Чтобы outline-width работал, необходимо установить у атрибута outline-style любое значение кроме none.

Синтаксис
outline-width: thin | medium | thick | значение

Значения
thin
Тонкая линия. Значение в пикселах может изменяться в зависимости от браузера, но обычно составляет 1 пиксел.

medium
Линия средней толщины (3 пиксела).

thick
Линия большой толщины (6 пикселов).

значение
Для точной установки толщины можно использовать любые единицы размера принятые в CSS.

Пример
outline-width: 3px; /* Толщина внешней границы */

Возможно, Вам будет полезна эта информация:

1. Отступы и блоки
2. Работа над списками
3. Позиционирование в CSS