Границы в CSS

Внутренняя граница. Свойство border

Каждый элемент имеет границу. По умолчанию она невидима. Оформление для границы задается с помощью свойства border.

Свойство border является универсальным, позволяющим одновременно указать значения всех свойств, связанных с оформлением границы элемента: border-width, border-style и border-color.

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

Не обязательно указывать значения всех свойств. Не используемым свойствам присваиваются значения по умолчанию. Только свойству border-style необходимо присвоить какое-либо значение кроме none, чтобы свойство border-width действовало.

Свойства border-top, border-right, border-bottom и border-left аналогичны свойству border, но позволяют применить стилевое оформление лишь к верхней, правой, нижней и левой границе элемента соответственно.

Свойства применимы ко всем элементам.



Толщина границы  

Свойство border-width задает толщину границы элемента для всех его сторон или индивидуально для каждой.

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

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

И еще раз напомним: чтобы свойство border-width действовало, необходимо свойству border-style присвоить любое значение, кроме none.

Свойства применимы ко всем элементам.

Стиль границы

Свойство border-style устанавливает стиль границы элемента для всех его сторон или индивидуально для каждой.

Стиль задается с помощью ключевых слов none, solid, double, dashed, dotted, groove, ridge, inset и outset, которые устанавливают тип линии.

Минимальная ширина для границы в виде двойной сплошной линии (значение double) составляет 3 пикселя. Иначе она будет отображаться сплошной.

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

Свойства применимы ко всем элементам.

Цвет границы

Свойство border-color задает цвет границы элемента для всех его сторон или индивидуально для каждой.

Цвет задается одним из способов, принятых в CSS (подробнее здесь...)

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

Свойства применимы ко всем элементам.

От 1 до 4 значений

При задании стиля границы для свойств border-width, border-style и border-color допускается указывать от 1 до 4 значений, разделяя их пробелом. Результат зависит от количества и приведен в таблице:

Количество значений	Результат
1	Граница элемента для всех его сторон имеет одинаковое оформление.
2	Первое значение задает оформление для верхней и нижней границы, второе для боковых границ элемента.
3	Первое значение задает оформление для верхней границы, второе для боковых, а третье значение для нижней границы элемента.
4	Значения поочередно устанавливают оформление границы для верхней, правой, нижней и левой стороны элемента.

Внешняя граница. Свойство outline

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

Стилевое оформление для внешней границы задается с помощью свойства outline.

Свойство outline, по аналогии со свойством border, является универсальным, позволяющим одновременно указать значения всех свойств, связанных с оформлением внешней границы элемента: outline-width, outline-style и outline-color.

Значения свойств указывают через пробел, в любом порядке. А браузер автоматически определяет принадлежность значения свойству.

Не обязательно указывать значения всех свойств. Не используемым свойствам присваиваются значения по умолчанию. Только свойству outline-style необходимо присвоить какое-либо значение кроме none, чтобы свойство outline-width действовало.

Свойства применимы ко всем элементам.

Значения у свойств outline-width, outline-style и outline-color те же, что и у свойств border-width, border-style и border-color соответственно.