Matt Lambert

Would you like to be a better designer & developer?
Sign up for my newsletter or check out my blog to start learning today.

Adding An Outline To Your Text Using the CSS3 text-stroke Property

By admin on January 20th, 2015 in CSS3

In this tutorial I’ll show you how to add an outline, or stroke, to your text using the CSS3 text-stroke property.

Live Demo

Here’s What The CSS Looks Like

The first step is to declare a text color, I’ve picked red here. Next, we use the text-stroke property to assign a color (black) and weight (1px). For this example, I’ve created a class called .stroke.

.stroke {
 color: #c00; /* text color */
 -webkit-text-stroke: 1px #000; /* stroke color and weight */

The text-stroke Property Explained

Here’s a breakdown of the values for the text-stroke property.

  • The first value is the stroke weight measured in pixels
  • The second value is the stroke color

Using Transparency

If you’d like to make the text fill transparent, you can do so by using the text-fill-color property. For this example, I created a second class called .stroke-transparent.

.stroke-transparent {
 -webkit-text-stroke: 1px #000;
 -webkit-text-fill-color: transparent;

If you’re interested in learning more about CSS3, check out my eBook the CSS3 Handbook