How to make a text stroke with CSS

In this article you will learn how to make a text stroke with CSS, that is, without the help of JS or external libs we will make the stroke functionality.

What’s up programmer, ok? Let’s learn to insert a stroke with CSS!

To add an outline to the letters in CSS we have some rules that solve this problem

However, it is important to mention that they are not compatible with IE or Opera mini, so be aware of that 🙂

The rules for changing the stroke are: text-stroke-width and text-stroke-color

Note: Use the rules with the -webkit-

The first changes the width of the outline and the second its color, so it’s completely manipulable

Let’s see an example of contouring letters with CSS:

<h1>This text will have contourn!</h1>

This is our HTML, now let’s add the stroke to h1 with the following CSS:

h1 {
 font-family: Helvetica;
 color: #FFF;
 -webkit-text-stroke-width: 1px;
 -webkit-text-stroke-color: #000;
}

Here we add a sans serif font, which helps with contoured texts, change the color to white and add the stroke with the width and color rules

See the result:

We can also use a rule to fill the contour, which is text-fill-color, you should use it like this:

-webkit-text-fill-color: red;

It will present the following return:

And this is how we make a text outline with CSS! 😀

Conclusion

In this article we learned how to make a text outline with CSS, in a very simple and fast way

We use the text-stroke-width and text-stroke-color rules to achieve our goal

We also learned that we need to use -webkit- on them

Want to learn more about CSS? Click here!