Два способа "прошить" элемент по краю

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

Outline

outline: 1px dashed salmon;
outline-offset: -15px;

Плюс:

• не требует дополнительных элементов.

Минус:

• не воспринимает border-radius, следовательно, способ не походит для элементов со скругленными углами.

Кроме того, свойство своеобразно ведет себя в Firefox: outline реагирует на размеры и положение тени.

Псевдо-элементы

Во-первых, нам потребуется обертка для текста, чтобы потом слой с текстом можно было поднять выше псевдоэлемента с рамкой. Во-вторых, общей обертке и контейнеру с текстом надо будет задать position: relative;.

После этого создаем псевдоэлемент и рисуем рамку:

.wrapper:before {
      content: "";
      display: block;
      position: absolute;
      top: 15px;
      right: 15px;
      bottom: 15px;
      left: 15px;
      border: 1px dashed salmon;
      border-radius: 5px;
      }

Результат:

Плюс:

• может иметь скругленные углы.

Минус:

• требует дополнительную разметку и больше кода