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

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

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

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

Синтаксис

Свойство может принимать одно из следующих значений: solid, dotted, dashed, ridge, dooble, groove, inset, outset, none:

селектор {
	outline-style: значение;
}

Значения

Значение Описание
solid Сплошная линия.
dotted Граница в виде точек.
dashed Граница в виде тире.
ridge Граница в виде выпуклой линии.
dooble Граница в виде двойной линии. Чтобы увидеть эффект толщина границы должна быть минимум 3px!
groove Вогнутая граница.
inset Рамка.
outset Рамка.
none Отсутствие границы.

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

Примеры

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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