Сокращенное свойство внешней границы: outline

outline

Поддержка браузерами
Настольные браузеры Chrome Firefox (Gecko) Internet Explorer Opera Safari
Базовая поддержка, версии браузеров 1.0 1.5 (1.8) 8.0 7.0 1.2
Мобильные браузеры Android Firefox Mobile IE Phone Opera Mobile Safari Mobile
Базовая поддержка, версии браузеров 2.2 1.0 7.0 12.0 5.1.1
Свойство
outline — это сокращенное свойство для внешних границ
Описание
Контуры позволяют обозначить границы элемента и, самое главное, они не учитываются при расчете ширины блока.

Свойство позволяет задать сразу все свойства для внешней границы, а не по отдельности

Наследование
Не наследуется. Это значит что стили применённые к родительскому элементу не передадутся потомкам
Применяется
Ко всем элементам, это значит что применяется и к блочным, и к встроенным, и к табличным и т.д.
Может принимать значения
otline-style | outline-width | outline-color
Значение по умолчанию
none — для значения otline-style
medium — для значения outline-width
цвет текста — для значения outline-color
Правила записи
свойство: значение; или
свойство: значение значение; или
свойство: значение значение значение;

  • Значения перечисляются через пробел
  • Порядок значений не важен
  • Если не указано какое-то значение, то оно будет выставлено по умолчанию
Примеры

<p>

У этого абзаца цвет внешней границы green, ширина внешней границы 3px и стиль внешней границы dashed

</p>

<p>

Этот абзац имеет цвет внешней границы lime и стиль внешней границы dotted

</p>

<p>

Этот абзац имеет стиль внешней границы double

</p>

<p>

Это значит что свойство унаследует значение от родителя

</p>

Поделиться