How to usetext-stroke Property in CSS
In this approach we are using the text-stroke property, to create a text outline with CSS. It adds an outline or stroke to text, specifying its width and color
Syntax:
selector {
-webkit-text-stroke: <width> <color>;
text-stroke: <width> <color>;
}
selectorrefers to the HTML element or class to which the stroke needs to be applied.<width>specifies the width of the stroke in pixels.<color>defines the color of the stroke.
Note: The text-stroke property is currently only supported in WebKit browsers (such as Chrome and Safari). For other browsers, the text-stroke property can be achieved using the -webkit-text-stroke property.
Example: In this example, we are using the above-explained approach.
HTML
<!DOCTYPE html> <html> <head> <style> h1 { -webkit-text-stroke: 2px green; text-stroke: 2px black; } </style> </head> <body> <h1>w3wiki</h1> </body> </html> |
Output:
How to Add Stroke using CSS ?
CSS “stroke” typically refers to the visual effect created by the border property, outlining elements with color and style. This can be useful for emphasizing or highlighting certain elements on a webpage. Adding a stroke to an element can be achieved using various approaches and CSS properties.
There are several methods that can be used to add strokes using CSS
- Using text-stroke Property
- Using border Property
We will explore all the above methods along with their basic implementation with the help of examples.