Outline CSS: как создавать четкие и красивые интерфейсы

Outline в CSS является стилизацией границы элемента, которая отображается вокруг элемента, но не влияет на его размер. Она позволяет добавить контур вокруг элемента, который может быть изображен в виде линии, точек, двойных линий или пунктира.

Синтаксис свойства outline:

outline: [ширина] [стиль] [цвет];

Примеры:

outline: 2px solid red; // линия шириной 2 пикселя и цветом красный
outline:  dotted 3px green; // пунктирная линия черного цвета, толщиной 3 пикселя
outline: double blue; // двойная линия синего цвета

Outline также может иметь свойства: outline-offset и outline-radius.

Outline-offset устанавливает расстояние между краем контура и краем элемента.

Пример:

outline-offset: 10px;

Outline-radius устанавливает радиус скругления углов контура.

Пример:

outline-radius: 15px;

Пример кода:

button {
  background-color: #4CAF50; /* Зеленый цвет */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  outline: 2px dotted red;
}

В приведенном выше примере кнопка имеет красный пунктирный контур толщиной 2 пикселя, который отображается вокруг кнопки.