Как сделать обводку текста в css

Чтобы сделать обводку текста в CSS, используйте свойство text-stroke. Это свойство задает толщину и цвет обводки для текста.

Вот пример CSS кода для добавления:

.my-text {
  color: #000000; /* Цвет текста */
  -webkit-text-stroke: 1px #FFFFFF; /* Толщина и цвет обводки */
  text-stroke: 1px #FFFFFF; /* Толщина и цвет обводки (стандартное свойство) */
}

В этом примере класс .my-text применяется к элементу с текстом, и свойство -webkit-text-stroke задает толщину обводки в 1 пиксель и цвет белый (#FFFFFF) для браузеров, использующих движок WebKit (например Google Chrome). Свойство text-stroke указывает те же значения для браузеров, которые не используют движок WebKit.

Обратите внимание, что не все браузеры поддерживают свойство text-stroke, поэтому, возможно понадобится использовать префиксы для поддержки разных браузеров.

Проверить поддерживается ли это свойство в выбранном вами браузере можно на сайте canIUse

Обводку букв делают свойством -webkit-text-stroke. Несмотря на префикс, его поддерживают Chrome, Safari, Firefox и Edge:

.title {
  font-size: 64px;
  color: #fff;
  -webkit-text-stroke: 2px #222;
}

Первое значение — толщина обводки, второе — её цвет.

Только контур без заливки

.outline {
  color: transparent;
  -webkit-text-stroke: 1px #222;
}

Обводка не «съедает» букву

-webkit-text-stroke рисует контур по центру линии буквы: половина толщины уходит внутрь, и тонкие шрифты становятся худее. Чтобы обводка была только снаружи, добавьте paint-order:

.title {
  -webkit-text-stroke: 4px #222;
  paint-order: stroke fill;
}

Браузер сначала нарисует обводку, потом поверх неё — заливку.

Через text-shadow

Старый способ работает везде, но даёт ровную обводку только при небольшой толщине:

.title {
  color: #fff;
  text-shadow:
    -1px -1px 0 #222,
     1px -1px 0 #222,
    -1px  1px 0 #222,
     1px  1px 0 #222;
}

Четыре тени, сдвинутые по диагоналям, складываются в контур толщиной 1px.

Свечение вокруг текста

.glow {
  color: #fff;
  text-shadow: 0 0 8px #4a90e2;
}

Обводку используют для крупных заголовков. В основном тексте она мешает читать.

Оформление текста в CSS разбирают в курсе «Профессиональная вёрстка».