Propiedad CSS text-stroke-color

La propiedad text-stroke-color establece el color del trazo (el contorno dibujado alrededor de los bordes de cada carácter), de forma independiente a la propiedad color del texto, que rellena el interior del glifo. Junto con text-stroke-width permite dar al texto un aspecto delineado, hueco o bicolor — una técnica habitual en encabezados de gran tamaño, logotipos e insignias.

Esta propiedad solo tiene efecto cuando se establece un ancho de trazo. Con un ancho de 0 (el valor predeterminado), no hay nada que colorear y no verás ninguna diferencia en pantalla.

El valor inicial es currentColor, lo que significa que, hasta que lo cambies, el trazo coincide con el color del elemento. Por lo tanto, si el texto es azul, el contorno también es azul.

Cuándo usarla

Encabezados delineados — rellena el texto con un color y trázalo con otro para dar énfasis.
Texto hueco / "fantasma" — establece color: transparent y confía completamente en el trazo, de modo que solo el contorno sea visible.
Legibilidad sobre fondos ocupados — un trazo oscuro fino sobre texto claro (o viceversa) mantiene las palabras legibles sobre imágenes.

Soporte de navegadores

Información

text-stroke-color es parte del estándar, pero para una amplia compatibilidad entre navegadores también debes establecer la propiedad con prefijo -webkit-text-stroke-color. Siempre combínala con -webkit-text-stroke-width. La forma abreviada -webkit-text-stroke establece el ancho y el color en una sola declaración.

Puedes elegir cualquier valor de color CSS. Consulta los colores HTML, la lista completa de nombres de colores CSS o la propiedad color para ver los formatos disponibles.

Valor inicial	currentColor
Se aplica a	Todos los elementos.
Heredable	Sí.
Animatable	Sí. El color es animatable.
Versión	CSS Text Module Level 4
Sintaxis DOM	object.style.textStrokeColor = "#8ebf42";

Sintaxis

Valores de CSS text-stroke-color

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

Ejemplo interactivo

El siguiente ejemplo traza el texto en verde y te permite cambiar el color del trazo en vivo con un selector de color. Observa cómo se establecen juntas las propiedades con prefijo y sin prefijo.

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

Pruébalo tú mismo »

Resultado

Ejemplo de texto hueco (solo contorno)

Establece el color del texto en transparent para que el relleno desaparezca y solo quede el trazo. Esto produce un clásico encabezado de "fantasma" o solo 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	Descripción
color	Especifica el color del trazo. Se pueden usar nombres de colores, códigos de color hexadecimales, rgb(), rgba(), hsl(), hsla().
initial	Hace que la propiedad use su valor predeterminado.
inherit	Hereda la propiedad de su elemento padre.

Propiedades relacionadas

text-stroke-width — establece el grosor del trazo. Sin un ancho, text-stroke-color no tiene efecto visible.
text-stroke — forma abreviada que establece el ancho y el color del trazo juntos.
text-fill-color — controla el color de relleno interior de forma independiente a color.
color — el color de texto estándar; también es la fuente de currentColor, el color de trazo inicial.

Práctica

El valor predeterminado de text-stroke-color es el valor predeterminado de la propiedad

border-color.color.background-color.