The text-stroke CSS property is used to apply an outline or stroke to the text of an element. It allows you to add a border-like effect to the text, which can be useful for creating stylized or decorative text effects.
Here’s an example of how to use the text-stroke property:
h1 {
-webkit-text-stroke: 1px black;
text-stroke: 1px black;
color: white;
}
In this example, the -webkit-text-stroke property is used with the vendor prefix -webkit- to target certain browsers. The text-stroke property is then used to apply a 1-pixel black stroke to the text of the <h1> heading element. The color property is set to white to ensure the text is visible against the stroke.
The text-stroke property accepts two values: a width value and a color value. The width value specifies the thickness of the stroke, while the color value determines the color of the stroke. You can use any valid CSS color value, such as a named color or a hexadecimal value.
It’s important to note that the text-stroke property is not supported in all browsers. It has limited support and may require vendor prefixes for cross-browser compatibility. Additionally, some browsers may only support text-stroke when used in conjunction with the -webkit-text-fill-color property.
In summary, the text-stroke CSS property allows you to add an outline or stroke effect to the text of an element. By specifying a stroke width and color, you can create decorative or stylized text effects. However, it’s important to be aware of limited browser support and consider fallback options when using this property.