Свойство CSS text-stroke-color

Свойство text-stroke-color задаёт цвет обводки (контура, рисуемого по краям каждого символа) независимо от свойства color, которое заполняет внутреннюю часть глифа. Вместе со свойством text-stroke-width оно позволяет придать тексту эффект контура, «пустого» или двухтонального начертания — распространённый приём для крупных заголовков, логотипов и бейджей.

Это свойство действует только при установленной ширине обводки. При ширине 0 (значение по умолчанию) окрашивать нечего, и на экране разница не заметна.

Начальное значение — currentColor, то есть до явной установки цвет обводки совпадает со значением свойства color элемента. Если текст синий, контур тоже будет синим.

Когда использовать

Заголовки с контуром — заполните текст одним цветом, а обводку сделайте другим для акцента.
«Пустой» / «призрачный» текст — установите color: transparent и полагайтесь исключительно на обводку, чтобы был виден только контур.
Читаемость на насыщенных фонах — тонкая тёмная обводка на светлом тексте (или наоборот) сохраняет читаемость поверх изображений.

Поддержка браузеров

Информация

text-stroke-color входит в стандарт, однако для широкой кросс-браузерной поддержки следует также устанавливать свойство с префиксом -webkit-text-stroke-color. Всегда используйте его совместно с -webkit-text-stroke-width. Сокращённое свойство -webkit-text-stroke задаёт ширину и цвет за одно объявление.

Допустимо любое значение цвета CSS. Смотрите цвета HTML, полный список названий цветов CSS или свойство color для ознакомления с доступными форматами.

Начальное значение	currentColor
Применяется к	Всем элементам.
Наследуется	Да.
Анимируемо	Да. Цвет поддаётся анимации.
Версия	CSS Text Module Level 4
DOM Syntax	object.style.textStrokeColor = "#8ebf42";

Синтаксис

Значения CSS text-stroke-color

text-stroke-color: color | initial | inherit;

Интерактивный пример

В примере ниже текст обведён зелёным цветом, а с помощью палитры цветов можно изменить цвет обводки в режиме реального времени. Обратите внимание, как одновременно задаются свойства с префиксом и без него.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1em;
        margin-top: 2em;
      }
      p {
        margin: 0;
        font-size: 3em;
        -webkit-text-stroke-width: 2px;
        text-stroke-width: 2px;
        -webkit-text-stroke-color: #8ebf42;
        text-stroke-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Text-stroke-color property example</h2>
    <p>Lorem Ipsum is simply dummy text...</p>
    <input type="color" value="#8ebf42" />
    <script>
      const input = document.querySelector('input[type="color"]');
      const p = document.querySelector('p');
      input.addEventListener('input', (e) => {
        p.style.webkitTextStrokeColor = e.target.value;
        p.style.textStrokeColor = e.target.value;
      });
    </script>
  </body>
</html>

Попробуйте сами »

Результат

Пример «пустого» (только контурного) текста

Установите color в значение transparent, чтобы заливка исчезла и остался лишь контур. Это создаёт классический «призрачный» заголовок.

<!DOCTYPE html>
<html>
  <head>
    <title>Hollow text with text-stroke-color</title>
    <style>
      h1 {
        font-size: 4em;
        color: transparent;
        -webkit-text-stroke-width: 2px;
        text-stroke-width: 2px;
        -webkit-text-stroke-color: #1c87c9;
        text-stroke-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h1>Outline</h1>
  </body>
</html>

Значения

Значение	Описание
color	Задаёт цвет обводки. Можно использовать названия цветов, шестнадцатеричные коды, rgb(), rgba(), hsl(), hsla().
initial	Устанавливает значение свойства по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Связанные свойства

text-stroke-width — задаёт толщину обводки. Без ширины свойство text-stroke-color не даёт видимого эффекта.
text-stroke — сокращённое свойство, задающее ширину и цвет обводки одновременно.
text-fill-color — управляет цветом внутренней заливки независимо от color.
color — стандартный цвет текста; также является источником значения currentColor, используемого как начальный цвет обводки.

Практика

Значение text-stroke-color по умолчанию совпадает со значением по умолчанию свойства

border-color.color.background-color.