CSS
🎯 CSS text-stroke-width Property
The text-stroke-width property defines the thickness of the outline (stroke) around text characters.
It controls how thick the border around letters appears, improving visibility and design emphasis.
💬 What is text-stroke-width used for?
This property is widely used in headings, logos, banners, and UI highlight text.
It helps make text stand out by adjusting the thickness of the outline around letters.
🔹 Basic Usage
CSS
-webkit-text-stroke-width: 2px;
➡️ This sets the stroke thickness to 2px.
🧩 Values
| Value | Description |
|---|---|
| length | Defines stroke thickness (px, em, rem) |
| initial | Resets to browser default value |
| inherit | Inherits value from parent element |
1. 2px Black Outline
CSS
h1 {
color: white;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: black;
}
2. 1px Red Outline
CSS
p {
color: yellow;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: red;
}
🔍 Quick Summary
- text-stroke-width controls the thickness of the text outline
- Works with -webkit-text-stroke-color to define full stroke styling
- Commonly used for headings, logos, and emphasis text
-
🧠 Summary
- The text-stroke-width property defines how thick the outline around text appears.
- It is commonly used to create bold, decorative, and attention-grabbing text styles.
- For full control, it is used together with -webkit-text-stroke-color.