Свойство outline

Описание

Универсальное свойство, одновременно устанавливающее цвет, стиль и толщину внешней границы на всех четырёх сторонах элемента.

В отличие от линии, задаваемой через border, у свойства outline есть следующие особенности:
- outline не влияет на размеры и положение самого элемента;
- outline не занимает место, не влияет на окружающие элементы и отображается поверх них;
- нельзя задать параметры линии на отдельных сторонах элемента, outline применяется сразу ко всем четырём сторонам;
- свойство border-radius не действует.

Синтаксис

outline: outline-color || outline-style || outline-width;
Значение Описание
outline-color Задаёт цвет линии в любом допустимом для CSS формате.
outline-style Стиль линии.
outline-width Толщина границы.

Пример

<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
 #test {
 width: 200px;
 height: 100px;
 background-color: #97dfc8;
 outline: 3px solid black;
 }
 </style>
 <div id='test'></div>
</body>
</html>

Читайте также