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.