CSS: чем «outline» отличается от «border»

  1. Не влияет на положение элемента и его размеры.
  2. Не позволяет задать рамку с определённой стороны элемента (только сразу со всех).
  3. На рамку не действует скругление углов, устанавливаемое с помощью свойства border-radius.

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

Не влияет на положение элемента и его размеры

Как известно, высота height и ширина width контента элемента не включают значения полей padding, толщины рамок border / outline и значения отступов margin, однако в размеры самого элемента они входят, кроме толщины рамки, созданной свойством outline.

CSS Box Model

outline определяет внешние границы элемента без отступов margin, и создаёт вокруг него «виртуальную» рамку, которая не участвует в позиционировании, то есть она абсолютно позиционирована. В этом можно убедиться, если внимательно сравнить два примера ниже.

Пример рамки Border

Пример рамки Outline