Свойство outline-width задает толщину внешней рамки (границы).

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

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

См. также свойства outline-color, outline-style, outline-offset и свойство-сокращение outline.

Синтаксис

селектор {
	outline-width: CSS единицы | thin | medium | thick
}

Значения

Значение Описание
CSS единицы Значение в заданных CSS единицах (кроме процентов).
thin 2 пикселя.
medium 4 пикселя.
thick 6 пикселей.

Значение по умолчанию: medium.

В процентах задание толщины невозможно.

Примеры

Пример

Внешне рамка outline не отличима от border, но она не занимает место (остальные элементы ведут себя так, будто рамки нет вообще, в отличие от границы через border):

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

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

Пример . Значение thin

#elem {
	outline-width: thin;
	outline-style: solid;
	outline-color: black;
	width: 300px;
	height: 100px;
}

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

Пример . Значение medium

#elem {
	outline-width: medium;
	outline-style: solid;
	outline-color: black;
	width: 300px;
	height: 100px;
}

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

Пример . Значение thick

#elem {
	outline-width: thick;
	outline-style: solid;
	outline-color: black;
	width: 300px;
	height: 100px;
}

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

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

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

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

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