Раз в неделю мы отправляем дайджест с самыми популярными статьями.

Что такое outline в CSS

Outline — это линия, по которой можно обвести тот или иной элемент. С помощью outline можно выделить элемент посреди других.

Заметьте, если объект имеет одновременно outline и border, то последний будет находиться внутри outline. Вообще outline имеет существенное отличие от border: он не является частью элемента, а значит, высота и ширина элемента будут рассчитываться без размеров outline.

Этот элемент имеет черный бордер и двойной красный контур шириной 10px


Стиль

Свойство outline-style определяет стиль контура.

Для outline-style возможны следующие значения:

  • dotted — пунктирный точечный контур
  • dashed — пунктирный контур
  • solid — сплошной контур
  • double — двойной контур
  • groove — объемный контур, требует outline-color
  • <code>ridge — объемный контур с внутренней тенью, требует outline-color
  • inset — объемный внутренний контур, требует outline-color
  • outset — объемный внешний контур, требует outline-color
  • none — никакого контура
  • hidden — скрытый контур

Следующий пример сначала указывает тонкий черный бордер для каждого элемента <p>, а затем добавляет различные стили outline-style к каждому элементу:

p {
 border: 1px solid black;
 outline-color: red;
}

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

Вот что получится в результате:

dotted outline

dashed outline

solid outline

double outline

groove outline

ridge outline

inset outline

outset outline

Цвет контура

Свойство outline-color требуется для указания цвета контуров.

Цвет можно задать с помощью:

  • имени — указать имя цвета, как-то red
  • RGB — указать RGB, например rgb(255,0,0)
  • Hex — с помощью hex-значение, #ff0000
  • invert — создает контур с цветом, инвертированным из цвета фона.
p {
 border: 1px solid black;
 outline-style: double;
 outline-color: red;
}

Ширина контура

Свойство outline-width помогает указать ширину контура.

Значение может быть указано в цифровом виде (in px, pt, cm, em и т. п) или одним из трех значений по умолчанию: thin, medium или thick.

p {border: 1px solid black;}

p.one {
 outline-style: double;
 outline-color: red;
 outline-width: thick;
}

p.two {
 outline-style: double;
 outline-color: green;
 outline-width: 3px;
}

Сокращенная запись

Чтобы сократить код, можно указывать контур в оодну линию.

Для этого используется свойство outline с такими параметрами:

  • outline-width
  • outline-style (необходимо)
  • outline-color

Вот пример:

p {
 border: 1px solid black;
 outline: 5px dotted red;
}

И вот результат:

контур

Итог

Свойство Описание
outline Добавление контура с декларацией в одну линию
outline-color Указание цвета контура
outline-offset Указания отступа между контуром и бордером элемента
outline-style Указание стиля контура
outline-width Указание ширины контура