Propriedade CSS text-stroke-color

A propriedade text-stroke-color define a cor do contorno (o traçado desenhado ao redor das bordas de cada caractere), de forma independente da color do texto, que preenche o interior do glifo. Combinada com text-stroke-width, ela permite criar textos com aparência de contorno, vazio ou em dois tons — uma técnica comum em títulos de destaque, logotipos e emblemas.

Esta propriedade só tem efeito quando uma largura de contorno está definida. Com largura 0 (o valor padrão), não há nada a colorir e nenhuma diferença será visível na tela.

O valor inicial é currentColor, o que significa que, até você defini-la, o contorno corresponde à color do elemento. Portanto, se o texto for azul, o contorno também será azul.

Quando usar

Títulos com contorno — preencha o texto com uma cor e aplique o contorno com outra para dar ênfase.
Texto vazio / "fantasma" — defina color: transparent e dependa inteiramente do contorno, de modo que apenas o traçado fique visível.
Legibilidade sobre fundos complexos — um contorno escuro fino em texto claro (ou vice-versa) mantém as palavras legíveis sobre imagens.

Suporte a navegadores

Informação

text-stroke-color faz parte do padrão, mas para amplo suporte entre navegadores você também deve definir a propriedade com prefixo -webkit-text-stroke-color. Sempre combine com -webkit-text-stroke-width. A abreviação -webkit-text-stroke define a largura e a cor em uma única declaração.

Você pode usar qualquer valor de cor CSS. Consulte cores HTML, a lista completa de nomes de cores CSS ou a propriedade color para os formatos disponíveis.

Valor Inicial	currentColor
Aplica-se a	Todos os elementos.
Herdada	Sim.
Animável	Sim. A cor é animável.
Versão	CSS Text Module Level 4
Sintaxe DOM	object.style.textStrokeColor = "#8ebf42";

Sintaxe

Valores CSS de text-stroke-color

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

Exemplo interativo

O exemplo abaixo aplica um contorno verde ao texto e permite alterar a cor do contorno ao vivo com um seletor de cores. Observe como as propriedades com e sem prefixo são definidas juntas.

<!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>

Experimente Você Mesmo »

Resultado

Exemplo de texto vazio (somente contorno)

Defina a color do texto como transparent para que o preenchimento desapareça e apenas o contorno permaneça. Isso produz um clássico título "fantasma" ou de contorno.

<!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>

Valores

Valor	Descrição
color	Especifica a cor do contorno. Podem ser usados nomes de cores, códigos hexadecimais, rgb(), rgba(), hsl(), hsla().
initial	Faz a propriedade usar seu valor padrão.
inherit	Herda a propriedade do elemento pai.

Propriedades relacionadas

text-stroke-width — define a espessura do contorno. Sem uma largura, text-stroke-color não tem efeito visível.
text-stroke — abreviação que define a largura e a cor do contorno juntas.
text-fill-color — controla a cor de preenchimento interior de forma independente de color.
color — a cor de texto padrão; também a origem de currentColor, a cor inicial do contorno.

Prática

O valor padrão de text-stroke-color é o valor padrão da propriedade

border-color.color.background-color.