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:                  

CSS Text-stroke

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:

CSS Text-stroke