CSS text-stroke

The CSS text-stroke property was a proposed CSS property that was intended to allow developers to add a stroke (outline) to text similar to the text-shadow property, but without requiring the use of pseudo-elements. However, as of my last knowledge update in September 2021, the text-stroke property was not officially part of the CSS standard, and browser support was limited or non-existent.

The initial text-stroke property proposal had the following syntax:

selector {
  text-stroke: <width> <color>;
}

• <width>: Represents the width of the stroke, which could be specified in pixels (px), em units, or other length units.
• <color>: Specifies the color of the stroke.

Example:

h1 {
  text-stroke: 1px red;
}

In this hypothetical example, the <h1> heading text would have a red stroke (outline) with a width of 1px.

It’s essential to note that the CSS specifications can change, and features that were once proposed may be reconsidered, modified, or abandoned. Always check the latest CSS specifications and browser documentation for updates and current support status.

As an alternative to text-stroke, developers can achieve similar effects using the text-shadow property with a negative value for the blur radius, which effectively creates an outline-like appearance. For example:

h1 {
  text-shadow: -1px 0 red, 0 1px red, 1px 0 red, 0 -1px red;
}

This creates a red outline around the <h1> heading text by using multiple shadows with negative offsets to simulate the stroke effect. Note that using text-shadow for stroke-like effects may not be as precise or consistent across browsers as a dedicated text-stroke property would be.

Again, remember to consider browser compatibility and test your CSS in different browsers to ensure the desired text styling is achieved.