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

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. More CSS, Bootstrap, and freelance tutorials delivered directly to your inbox.



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

13 Comments

Opinons welcome, keep it clean.

Leave a comment
  1. hi matt!
    nice work yours.
    i’m a brasilian (sorry about the language errors) control and automation engeneering student and a poet.
    i have a blog named “c├írdeo”. in portuguese it means a color from the “cardo” flower:
    http://en.wikipedia.org/wiki/Thistle
    that was how i came to your blog (googling). i’m very curious to know what means “cardeo” for you. i read that is a spanish village. is because of that?
    thanks!

  2. Hi Marcos, thanks for that info. There isn’t a huge meaning behind the spelling of the name for me. The name came about from when my band was trying to think of a name a few years ago. Cardio was one that we decided not to go with but it stuck with me. I decided to change the spelling slightly to “cardeo” and run with that for my business/blog name.

  3. Verily, there are very few people, nowadays anyway, thatworry about getting your text just right. GREAT ARTICLE SIR!

  4. Thanks for reading

  5. that’s nice! I’m happy in kind of sharing this name with you. it’s a nice job!
    cheers!

  6. Thank you for sharing your response, and offering some solutions.,lucy

  7. Sushama Thakur

    Thanks for new concept. Is there any css available for same which support to firefox or IE.

  8. Hi Sushama, not support for firefox and IE quite yet

Trackbacks for this post

  1. 8 examples of stunning CSS3 text effects
  2. 8 examples of stunning CSS3 text effects « Nap5teR
  3. Among many other things, CSS3 has lots of nice effects to enhance the typography of your website. In this article, I have compiled 8 extremely promising typography techniques done using CSS3. - - Tamil, movies, Religious Hindu Muslim christain Jain, Histo
  4. Adding An Outline To Your Text Using the CSS3 text-stroke Property … | MUSCLE CODER
  5. Creative Typography You Must Use | KumarShyama

Leave a Comment

Opinons welcome, keep it clean.