Полезное, но редко используемое свойство — внешняя рамка или outline.

Синтаксис outline схож с border. Но внешней рамке нельзя задать параметры отдельных сторон. Пример:

/* сплошная чёрная рамка толщиной 10px */
outline: 10px solid black;

Это сокращённый синтаксис свойства outline. Есть и отдельные свойства:

outline-width: 10px;  /* толщина */
outline-style: solid; /* стиль */
outline-color: black; /* цвет */

Внешняя рамка всегда отображается снаружи элемента, не влияет на его размер и не занимает места, то есть отображается над другими элементами.

C помощью свойства outline-offset можно изменять расположение рамки. Положительное значение отодвигает рамку от внешнего края элемента, а отрицательное «втягивает» внутрь.

У outline-style те же значения, что и у border-style. Кстати, есть интересные типы рамок ridge и groove, они создают объёмные рамки.

Попробуем всё это на практике.