Text-stroke – adding border to text using Css

In this tutorial, we’re going to teach you how you can add border or stroke to your text using Css only.

Preview:

See the Pen
Adding border to text using Css by SLICEmyPAGE (@slicemypage)
on CodePen.

You can use this feature to create many types of text using your own creativity.

I have created 3 examples to show you how you can use border or stroke in your text for your next website.

Html:

<h1>Bordered Text</h1>
<h2>Bordered Text</h2>
<h3>Bordered Text</h3>

Css:

h1{
  font-size:100px; 
  -webkit-text-stroke-width: 3px;
  -webkit-text-stroke-color: #f00;
  color: #ff0;
}


h2{
  font-size:100px; 
  -webkit-text-stroke-width: 3px;
  -webkit-text-stroke-color: #f00;
  color:transparent;
}

h3{
  font-size:100px; 
  -webkit-text-stroke-width: 3px;
  -webkit-text-stroke-color: #f00;
  color:transparent;
  text-shadow:-8px -8px 0 #f00;

}

Preview:

See the Pen
Adding border to text using Css by SLICEmyPAGE (@slicemypage)
on CodePen.

Let me know how you are going to use this CSS property on your website.

Or if you have already used this CSS property on your website? please share your website link in the comment section.

Read also: Button with gradient borders in CSS