CSS
🎯 CSS text-stroke Property
The text-stroke property is used to add an outline (stroke) around text characters.
It makes text more visible by drawing a border around each letter, improving readability and visual impact.
💬 What is text-stroke used for?
This property is commonly used in headings, logos, banners, and UI highlights.
It is especially useful when text needs to stand out from complex or light backgrounds.
-
⚠️ Important Note
- The standard text-stroke property is not fully supported in all browsers.
- In most cases, developers use -webkit-text-stroke for better compatibility.
🔹 Basic Usage
CSS
h1 {
color: white;
-webkit-text-stroke: 2px black;
}
➡️ This creates white text with a black outline.
🧩 Examples
1. White text with black stroke
CSS
h1 {
color: white;
-webkit-text-stroke: 2px black;
}
2. Yellow text with red stroke
CSS
p {
color: yellow;
-webkit-text-stroke: 1px red;
}
🔍 Quick Summary
- text-stroke adds an outline around text characters
- Improves readability and visual impact for headings and logos
- Common syntax: -webkit-text-stroke: thickness color;
-
🧠 Summary
- The text-stroke property is used to create an outline effect around text.
- It is widely used in modern UI design to make headings, logos, and banners more visible.
- For best compatibility, use -webkit-text-stroke.