Sometimes we need to highlight the outline of our text on our webpage, in that case, we use a property named text-stroke in CSS.
The text-stroke property of CSS is used to display or highlight the outline of a text on a Web page. Although the property is text-stroke, but most modern browser like Chrome, Firefox, etc support -webkit-text-stroke property.
Although all the modern browsers support this property, browsers like Internet Explorer does not support this property, hence we must use this property carefully.
Time for an Example
The code below shows, how we can use this property to draw an outline around normal text, by specifying a color of the outline and the width of the outline.
In the code example above, we have used three different CSS properties, namely, -webkit-text-fill-color, -webkit-text-stroke-color and -webkit-text-stroke-width. Let's understand these properties,
-webkit-text-fill-color: This property specifies the base color for the text.
-webkit-text-stroke-color: This property specifies the color of the border outline.
-webkit-text-stroke-width: This property specifies the width of the border outline.
Also, in the above code, we have used a prefix -webkit which is to use the text-stroke property in the chrome browser.
If we want to use this property in Mozilla then you need to use -moz as a prefix with the property, although Mozilla now supports the -webkit prefix too.
Shorthand Syntax:
The above code can be used in shorthand form like this,
h1 { -webkit-text-stroke: 1px black; }
The -webkit-text-fill-color property is not mandatory to provide, as by default the text color is set as black. But if you wish to change it, you can do so using the -webkit-text-fill-color property.
Handling in Incompatible Browsers:
For the browsers which are incompatible, we can provide the color property in CSS so that if any browser doesn't support the text-stroke property then the text is displayed in solid color. For example,
h1 {
color: black // default color for unsupported browser
-webkit-text-stroke: 1px black;
-webkit-text-fill-color: white;
}
By adding a simple color property in your styling you can provide support for incompatible browsers too.
Simulating the effect using Shadow
We can use the text-shadow property which is a more widely supported property to simulate the same outline highlighting effect of the text. Let's see a simple example.
You may also like:
