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

В отличие от border граница через outline не расширяет элемент: если у элемента задана ширина width в 200px, то при наличии border толщиной в 1px реальная ширина элемента будет 202px (по 1px границы с каждой стороны). Если же задать границу через outline - то реальная ширина элемента будет по-прежнему 200px. Визуально ширина будет 202px, но все прочие элементы будут вести себя так, как будто границы нет (она даже может налезть на другие элементы) и ширина элемента 200px.

К сожалению, задание границы outline для конкретной стороны невозможно, только для всех сторон одновременно.

См. также свойство outline-offset.

Синтаксис

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

селектор {
	outline: толщина тип цвет;
}
селектор {
	outline: 1px solid red;
}

Значения

См. outline-width, outline-style, outline-color.

Примеры

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

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

Результат выполнения кода:

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

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

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

Результат выполнения кода: