Свойство outline

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

Синтаксис

cssселектор {
  outline: толщина тип цвет;
}

Порядок свойств значения не имеет.

Пример . Toлько outline

html<div id="elem"></div>

css#elem {
  outline: 1px solid black;
  width: 300px;
  height: 100px;
}

Результат:

Пример . Свойства outline и border вместе

Граница от outline будет снаружи, а граница от border - внутри:

html<div id="elem"></div>

css#elem {
  outline: 4px solid green;
  border: 4px solid red;
  width: 300px;
  height: 100px;
}

Результат:

Смотрите также