Matt Lambert

Check out my blog, or sign up to receive articles by email.

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

Like what you read? Check out my store over at Creative Market to support the blog and help keep the lights on. Files starting from only $2.