/    /  CSS text-stroke

CSS text-stroke

 

Adds a stroke element to the text and also provides decoration options for them. It specifies the color and width of strokes for text characters.

 

two properties:

 

  • text-stroke-width: Thickness of the stroke effect
  • text-stroke-color: It takes the value of a color.

 

Example:

 

<!DOCTYPE html>
<html>

<head>
  <title>
    CSS text-stroke property
  </title>
      <style>
    body{
               text-align: center;
               }
               .jtp {
      color: white;
      font-size: 50px;
      -webkit-text-stroke-width: 2px;
      -webkit-text-stroke-color: yellow;
    }
  </style>
</head>

<body>
  <h1 class= "jtp">Welcome to the I2tutorials</h1>
       <h2 class= "jtp" style= "-webkit-text-stroke-color: blue;">CSS text-stroke property</h2>
</body>

</html>

 

OUTPUT:

 

CSS text-stroke

 

Example:

 

Using -webkit-text-fill-color.

 

<!DOCTYPE html>
<html>

<head>
  <title>
    CSS text-stroke property
  </title>
      <style>
    body{
      text-align: center;
      }
      .jtp {
  font-size: 75px;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: red;
  -webkit-text-fill-color: yellow;
  text-shadow: 5px 5px 6px gray;
}
  </style>
</head>

<body>
  <h1 class= "jtp">Welcome to the I2tutorials</h1>
       <h2 class= "jtp" style= "-webkit-text-stroke-color: blue;">CSS text-stroke property</h2>
</body>

</html>

 

OUTPUT:

 

CSS text-stroke