Cardeo Design Blog, Code, Design, WordPress, Minimal, CSS, Freebies, Twitter, Facebook, Social Media

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

March 3rd, 2010

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

Browser Support

Currently, these styles are only supported by Safari and Chrome.

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 */
}

Here’s What It Looks Like

Make sure you check out the Cardeo Minimal HTML Email Template.

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

Here’s What It Looks Like

Support Files

That’s it, that’s all. Check out the Live Demo to see it in action, or Download the source files.

Tags: css3, font, property, text-stroke, type