CSS Text-stroke
Text-stroke
Text-stroke CSS property inserts the stroke to any text and gives a decoration option to them also. It describes the stroke’s width and color for various text characters.
It is shorthand for the following properties:
text-stroke-width: This property specifies the stroke’s thickness effect and holds the value of the unit.
text-stroke-color: This property holds the color value.
Text-stroke property is only applied with a -webkit- prefix.
Example:
<!DOCTYPE html> <html> <head> <title> Text-stroke Property </title> <style> body { text-align: center; } .exp { color: white; font-size: 50px; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: purple; } </style> </head> <body> <h1 class= "exp"> Welcome to this Page </h1> <h2 class= "exp" style= "-webkit-text-stroke-color: lime;"> It is an example of text-stroke CSS property </h2> </body> </html>
Output:
Let’s take another illustration of text-stroke CSS property.
Example:
<!DOCTYPE html> <html> <head> <title> Text-stroke Property </title> <style> body { text-align: center; } .exp { font-size: 50px; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: purple; -webkit-text-fill-color: tomato; text-shadow: 5px 5px 6px gray; } </style> </head> <body> <h1 class= "exp"> Welcome to this Page </h1> <h2 class= "exp" style= "-webkit-text-stroke-color: lime;"> It is an example of text-stroke CSS property </h2> </body> </html>
Output: