Updated June 23, 2023
Introduction to CSS text-stroke
In CSS, we use the text-stroke property to add strokes to text, allowing us to change both the width and color of the applied text. The text-stroke property is commonly supported with the webkit prefix to ensure compatibility. It is primarily used for text decoration purposes, similar to vector drawing applications.
Working on CSS text-stroke Property
In CSS, there is a property that helps in text-decoration and stroking of text, which text-stroke property. Does this property, in turn, provides a shorthand for the other two properties, text-stroke-width and text-stroke-color. WebKit-based browsers support the use of this property for adding strokes to the text, requiring the -webkit prefix. Few browsers don’t support this property and can use the text-fill-color property, which overrides the color property.
This property is usually less used as it aligns the text to the center, and there is no current alignment option in this property. And this property also alters the stroke’s shape from the original shape. Hence, developers commonly use it with the -webkit- prefix, which makes it animatable and more usable in the text-shadow property. The text-stroke property can specify both width and color at once. This can be shown in the example below that uses –webkit-prefix; we can specify text-stroke-width and text-stroke-color properties in a single property. This property has two shorthand properties like, text-stroke-width and text-stroke-color properties which can be used separately each on one line.
Syntax:
-webkit-text-stroke: width value color value;Example:
<!DOCTYPE html>
<html>
<head>
<title>Educba Training</title>
<style>
p {
font-size: 2em;
-webkit-text-stroke: 1px #1c57c9;
}
</style>
</head>
<body>
<h2>CSS Text-stroke property</h2>
<p>This is an example of text-stroke property</p>
</body>
</html>Output:
In the above program, we have used the text-stroke property, which specified the font size and color in a single property, and we can see the output. The paragraph applies the text-stroke property to the sentence.
Two Shorthand Properties of text-stroke are as follows
As this property is only supported by the –webkit- prefix, we can see the below examples using the webkit prefix.
1. Text-stroke-width
As the name suggests, this property gives the thickness of the stroke to be displayed and takes a unit value. We use this property to specify the thickness or font size of sentences or characters within an element’s layout. You can use it in conjunction with the text-stroke color or independently. When using the text-stroke property alone, there is no need for this sub-property, as it can simultaneously specify both the width and color. This property also has support for the -webkit- prefix when executed.
Example:
Now let us see the example of how to use text-stoke-width.
Syntax:
text-stroke-width: values in pixel;Code:
<!DOCTYPE html>
<html>
<head>
<title>
Educba Training
</title>
<style>
p {
-webkit-text-stroke-width: 1px;
}
</style>
</head>
<body>
<p >CSS text-stroke-width property</p>
</body>
</html>Output:
In the above program, we see that we are printing the text in the paragraph with a width of 1 px. This program displays the output showing the text inside the paragraph, for which we have applied CSS property using the –webkit- prefix like –webkit-text-stroke-width along with the value as 1px to display the text.
2. Text-stroke-color
The CSS text-stroke shorthand property enables the specification of the color for the text to which it is applied. It can also function independently to designate the color for specific text. It can be combined with the width of letters or sentences. There is no need to display this property separately as it is specified within the text-stroke property itself. Furthermore, it also enjoys support with the -webkit- prefix, similar to the previously mentioned scenario.
Example:
Now, let’s take a look at an example that demonstrates how to use the -webkit-text-stroke-color to display the color of the text. This can use either color names directly or the color values using the “#” symbol at the start of the color value.
Syntax:
-webki-text-stroke-color: color name or color value;Code:
<!DOCTYPE html>
<html>
<head>
<title>
Educba Training
</title>
<style>
p {
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: purple;
}
</style>
</head>
<body>
<p >CSS text-stroke-color example </p>
</body>
</html>Output:
In the above program, we can see that we have used the –webkit-text-stroke-color property. In this, we have specified the value as “purple” where this will display the text in the paragraph in purple. We can also use color values instead of color names where we can use them using the “#” symbol at the start of the value, such as for black color, the value is #000000, and for white color, the value is #ffffff.
We saw that all the browsers do not support this text-stroke property, so we can use the text-fill-color property as this supports all the Webkit-based browsers. You can also display this using the -webkit- prefix.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Educba Training</title>
<style>
p {
font-size: 2.5em;
-webkit-text-stroke: 3px #1c87c9;
-webkit-text-fill-color: blue;
}
</style>
</head>
<body>
<h2>CSS Text-stroke property </h2>
<p>This is an example of text-fill-color property.</p>
</body>
</html>Output:
Conclusion
This article concludes that the CSS text-stroke property adds strokes to the text, like width and color. This property provides two shorthand properties, text-stroke-width, which provides the text’s width or thickness, and text-stroke-color offers the color of the text using color names or color values. All these properties use the –webkit- prefix, as all browsers do not support this property. So to support this property in all browsers, we have to use a text-fill-color property that supports all the Webkit-based browsers.
Recommended Articles
We hope that this EDUCBA information on “CSS text-stroke” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
