Свойство 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>Читайте также
Свойство border-top
Позволяет одновременно установить толщину, стиль и цвет верхней границы элемента.
Значения могут идти в любом порядке, браузер автоматически опреде...
Свойство unicode-bidi
В европейских языках чтение текста происходит слева направо, в то время как есть языки, где текст читается справа налево. При смешении в одном докумен...
Свойство caption-side
Определяет положение заголовка таблицы, который задается с помощью элемента caption. Свойство выводит заголовок до или после таблицы....
Свойство page-break-inside
Разрешает или запрещает разрыв страницы внутри элемента при печати....