CSS
🎯 CSS text-stroke-color Property
The text-stroke-color property defines the color of the outline (stroke) around text characters.
It is commonly used with -webkit-text-stroke to create outlined text effects.
💬 What is text-stroke-color?
This property sets the color of the stroke (outline) around text.
It helps make text more visible, decorative, and visually appealing in UI design.
🔹 Basic Usage
CSS
h1 {
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: red;
}
➡️ This creates a 2px thick red outline around the text.
🧩 Possible Values
| Value | Description |
|---|---|
| color | Sets stroke color (red, blue, #hex, rgb) |
| initial | Resets to default browser value |
| inherit | Inherits value from parent element |
Example Usage
CSS
h1 {
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: blue;
}
➡️ This example creates a blue outline around the text.
🔍 Summary
- text-stroke-color sets the color of text outline
- Works together with -webkit-text-stroke-width
- Used for modern UI, logos, headings, and decorative text
-
🧠 Summary
- The text-stroke-color property defines the color of the outline around text.
- It is commonly used with stroke width to create visually strong typography effects.
- It improves readability and design emphasis in modern web interfaces.