Treehouse: Grow your CSS skills. Land your dream job.
CSS Almanac » Properties » T » text-stroke

text-stroke

Last updated on:

text-stroke is an experimental property that provides text decoration options similar to those found in Adobe Illustrator or other vector drawing applications. It is not currently included in any W3C or WHATWG specification. As of June 2013, it is only implemented behind a -webkit vendor prefix, though future versions of Firefox and Internet Explorer may support the property (likely under their own prefixes).

mark {
    -webkit-text-stroke: 2px red;
}

The text-stroke property is actually shorthand for two other properties:

  1. text-stroke-width, which takes unit value (1px, 0.125em, 4in, etcetera) and describes the thickness of the stroke effect.
  2. text-stroke-color, which takes a color value (hex, rgb/rgba, hsl/hsla, etcetera).

text-stroke also has a companion property, text-fill-color, which will override the color property, allowing for a graceful fallback to a different text color in browsers that do not support text-stroke.

Check out this Pen!

Points of Interest

  • The stroke drawn by text-stroke is aligned to the center of the text shape (as is the default in Adobe Illustrator), and there is currently no option to set the alignment to the inside or outside of the shape. Unfortunately this makes it much less usable, as no matter what now the stroke interferes with the shape of the letter destroying the original type designers intent. A setting would be ideal, but if we had to pick one, outside stroke would have been much more useful.
  • in Webkit, text-stroke is animatable with CSS Transitions and Animations – but only the stroke color, not the stroke width.
  • A more browser-compatible (and arguably robust) stand-in for the text-stroke effect is using text-shadow, which is outlined in this CSS-Tricks article.

Other Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
-webkit- -webkit- 21 15+ 10 Complicated -webkit-

A note on browser support: The table above is a summary of overall browser support for text-stroke – the truth is much more complicated (for example, Android supported the property in versions 2.1-2.3, then removed support in 3.0, before restoring support in 4.0). For the full browser support table, visit caniuse.com/text-stroke.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```

What now? I have some ideas for you.

Go explore CodePen!

As a front end designer and developer, you should have an account on CodePen so you can save your snippets, present your ideas, and engage with the rest other front end folk. I'd encourage you to go PRO as well, to unlock the full power of CodePen.

Go PRO on CodePen

Get the newsletter!

You should sign up for the CSS-Tricks newsletter. It's a clean copy of all the blog posts each week, combined together, right to your inbox. If email isn't your thing, there is an RSS feed, iTunes, and lots of other ways to subscribe.

Subscribe to The Lodge!

The Lodge is a members-only, ad-free video learning area here on CSS-Tricks. Just like the free screencasts, but organized into four large complete series. Membership is also the #1 best way to support CSS-Tricks.

Signup for The Lodge

Peruse Jobs!

Always good to keep your eye on the field.

If you're looking to hire, posting your job on the CodePen job board means it will be shown here on CSS-Tricks and on the ShopTalk job board as well.

Post a Job

We can do the real footer now.