Adding Text Strokes with CSS `text-stroke`: Enhancing Text Readability and Visual Style

Learn how to use CSS's `text-stroke` property to add outlines (strokes) to text, improving readability and adding a stylistic element to your web typography. This tutorial explains the `text-stroke` property's syntax, its parameters (width, color), and provides examples demonstrating its usage and browser compatibility considerations.



Adding Text Strokes with CSS `text-stroke`

Understanding `text-stroke`

The CSS `text-stroke` property adds an outline (stroke) to text characters. This creates a visually distinct effect, improving readability and adding a stylistic element to your text. The `text-stroke` property is a shorthand for `text-stroke-width` and `text-stroke-color`.

`text-stroke` Properties

  • text-stroke-width: Specifies the stroke width (thickness) in length units (e.g., pixels).
  • text-stroke-color: Sets the stroke color (using standard color names, RGB, hex codes, etc.).

Note: `text-stroke` often requires the vendor prefix -webkit- for compatibility with some browsers (though this is becoming less necessary with newer browser versions).

Example: Applying a Text Stroke

CSS Code

p {
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: red; 
}

This will add a 2-pixel-wide red outline to the text within the paragraph.

Example with Fill Color

You can use -webkit-text-fill-color (or the standard `color` property) to set the text's fill color. This allows you to customize both the outline and the text color independently. The example shows how to use `-webkit-text-fill-color` to set a fill color along with a text stroke.

CSS Code

p {
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: blue;
  -webkit-text-fill-color: white; /* or use 'color: white;' */
}

This will create text with a blue outline and white fill color.