Outline effect to text

There is an experimental webkit property called text-stroke in CSS3, I’ve been trying to get this to work for some time but have been unsuccessful so far.

What I have done instead is used the already supported text-shadow property (supported in Chrome, Firefox, Opera, and IE 9 I believe).

Use four shadows to simulate a stroked text:

.strokeme {
  color: white;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
<div class="strokeme">
  This text should have a stroke in some browsers
</div>

 Run code snippetExpand snippet

I have made a demo for you here

And a hovered example is available here


As Jason C has mentioned in the comments, the text-shadow CSS property is now supported by all major browsers, with the exception of Opera Mini. Where this solution will work for backwards compatibility (not really an issue regarding browsers that auto-update) I believe the text-stroke CSS should be used.

Leave a Comment