Внешний контур

Внешний контур - это линия, которая отрисовывается за рамкой HTML элемента.


У этого элемента черная рамка и зеленый внешний контур шириной 10px.

Внешний контур - это линия, которая рисуется вокруг элемента ЗА ПРЕДЕЛАМИ рамки, чтобы "выделить" HTML элемент.

В CSS есть следующие свойства для определения внешнего контура элемента:

  • outline-style
  • outline-color
  • outline-width
  • outline-offset
  • outline

Внимание! Внешний контур отличается от рамки! Внешний контур рисуется за пределами рамки элемента и может перекрывать другое содержимое. Также, внешний контур не входит в систему размеров элемента, т. е. ширина внешнего контура не влияет на общую ширину и высоту элемента.

Стиль внешнего контура

Свойство outline-style определяет стиль внешнего контура и может принимать следующие значения:

  • dotted - Внешний контур состоит из точек
  • dashed - Внешний контур состоит из черточек
  • solid - Сплошная линия
  • double - Двойная сплошная линия
  • groove - 3D контур, представляющая прорезанный желоб
  • ridge - 3D контур, представляющая оттиснутую борозду
  • inset - 3D контур, представляющая вдавленное углубление
  • outset - 3D контур, представляющая выставленное возвышение
  • none - Без внешнего контура
  • hidden - Скрытый внешний контур

В следующем примере используются различные значения свойства outline-style:


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).

Внешний контур из черточек (dashed).

Сплошная линия (solid).

Двойная сплошная линия (double).

Прорезанный желоб (groove). Эффект зависит от значения свойства outline-color.

Оттиснутая борозда (ridge). Эффект зависит от значения свойства outline-color.

Вдавленное углубление (inset). Эффект зависит от значения свойства outline-color.

Выставленное возвышение (outset). Эффект зависит от значения свойства outline-color.


Внимание! НИКАКОЕ другое свойство определения внешнего контура не будет работать пока не будет определено свойство outline-style!

Ширина внешнего контура

Свойство outline-width определяет ширину внешнего контура и может принимать следующие значения:

  • thin (обычно 1px)
  • medium (обычно 3px)
  • thick (обычно 5px)
  • число в единицах измерения (в px, pt, cm, em и т.д.)

В следующем примере определяется различная ширина внешнего контура:


p.ex1 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: thin;
}

p.ex2 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: medium;
}

p.ex3 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: thick;
}

p.ex4 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: 4px;
}

Результат:

Значение thin

Значение medium

Значение thick

Значение 4px


Цвет внешнего контура

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

Цвет можно задать как

  • имя цвета - например, "red",
  • HEX значение - например, "#ff0000",
  • RGB значение - например, "rgb(255,0,0)",
  • HSL значение - например, "hsl(0,100%,50%)",
  • invert - инверсия цвета (позволяет сделать внешний контур видимым независимо от цвета фона).

В следующем примере определяется различный цвет внешнего контура. Обратите внимание, что у элемента также определяется тонкая черная рамка внутри внешнего контура:


p.ex1 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: red;
}

p.ex2 {
  border: 2px solid black;
  outline-style: dotted;
  outline-color: blue;
}

p.ex3 {
  border: 2px solid black;
  outline-style: outset;
  outline-color: grey;
}

Результат:

Сплошной красный внешний контур.

Синий внешний контур из точек.

Выставленный серый внешний контур.


Подробнее о цветах рассказывается в главе нашего учебника Как использовать цвета.

Короткая форма записи

Свойство outline является короткой формой записи, объединяющей воедино следующие свойства:

  • outline-width
  • outline-style (обязательно)
  • outline-color

Свойство outline может использоваться с одним, двумя или тремя значениями из данного списка. Порядок значений не важен.

В следующем примере определяются внешние контуры с использованием краткой формы записи outline:


p.ex1 {outline: dashed;}
p.ex2 {outline: dotted red;}
p.ex3 {outline: 5px solid yellow;}
p.ex4 {outline: thick ridge pink;}

Результат:

Внешний контур из черточек

Красный внешний контур из точек

Сплошной желтый внешний контур шириной 5px

Толстый рельефный розовый внешний контур


Смещение внешнего контура

Свойство outline-offset добавляет промежуток между внешним контуром и краем/рамкой элемента. Промежуток между элементом и внешним краем прозрачный.

В следующем примере определяется внешний контур с отступом 15px от рамки элемента:


p {
  margin: 30px;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
}

Результат:

У этого параграфа есть внешний контур, который имеет отступ от рамки в 15px.

Следующий пример показывает, что промежуток между внешним контуром и рамкой элемента прозрачный:


p {
  margin: 30px;
  background: yellow;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
}

Результат:

У этого параграфа есть внешний контур, который имеет отступ от рамки в 15px.

Все CSS свойства определения внешнего контура

Свойство Описание
outline Короткое свойство, определяющее атрибуты внешнего контура за одну декларацию
outline-color Определяет цвет внешнего контура HTML элемента
outline-offset Определяет величину отступа внешнего контура от элемента
outline-style Определяет стиль внешнего контура
outline-width Определяет ширину внешнего контура