Blog

Ramblings on Front End Design & Development.

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;
}

Newsletter

My best content on Front End Design & Development.

No spam, ever. Subscribe for my best content and freebies.