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.