HTML5 and CSS3 Advent 2011

Giving text some outline

Having the ability to implement a custom font is cool, but sometimes you need that extra edge (pun intended). With the text-stroke property you can achieve just that.

This example currently only works in Chrome and Safari, it may work in another browser in the future... Not to be left out, we've added some screenshots.

Examples

Woah!

Simple example with a color and a text-stroke.

Hover me!

Of course it works with a :hover, @font-face and transitions too.

Winter

In combination with a background and rgba-colors it gives a nice effect.

Screenshots of above examples

Woah!

Simple example with a color and a text-stroke

Hover me!

Of course it works with a :hover, @font-face and transitions too.

Winter

In combination with a background and rgba-colors it gives a nice effect.

How does it work?

It's quite simple. By setting a text-stroke-width you define the stroke width (in your favourite unit) and by setting text-stroke-color the outline gets its color. There is a property to define the text-fill-color which will override the regular color definition. This might look redundant, but helps providing a fallback color to browsers that don't support the text-stroke property.

Compatibility

The text-stroke is currently webkit only (meaning: Chrome and Safari) and is not part of any CSS specification at the moment. You can however fake the outline effect by using text-shadow, see the article Adding Stroke to Web Text on css-tricks.com for an example.

Show us the source!

Feel free to look around the different source files we used for this example.

Check out our all new HTML & CSS Advent 2012