text-stroke cross browser

Question

I'm trying the new text-stroke features and I've searched the web for a cross browser solution. For now I only could find it with webkit properties.

-webkit-text-stroke: 2px #FF1E00;

Could you let me know if there is a way so all browsers will display in the same way?

score 11 · Answer 1 · edited May 23 '17 at 12:18

11

.strokeme
{
    color: white;
    text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;  
}

from: Outline effect to text

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

edited May 23 '17 at 12:18

Community

1
1

answered Jun 20 '13 at 04:36

niico

11,206
23
78
161

Sampson · Accepted Answer · 2012-05-24T16:21:35.363

5

As of May 24^th, 2012, there is no cross-browser solution, as only webkit supports the experimental feature according to http://caniuse.com/#search=text-stroke. You can simulate this (to some degree) with 4 or 5 text-shadow's on an element.

Demo: Text Stroke, on CSS-Tricks.com

edited May 24 '12 at 16:21

answered May 24 '12 at 16:13

Sampson

265,109
74
539
565

score 0 · Answer 3 · answered Dec 11 '17 at 20:14

0

You could try strokeText.js, a vanilla javascript plugin.

Strokes do not overlap your text like they do with -webkit-text-stroke
Supports all browsers except IE8 and below
Selectable text
Dependency-free

Full disclosure, I made the plugin.

answered Dec 11 '17 at 20:14

inorganik

24,255
17
90
114

score 0 · Answer 4 · answered Aug 28 '19 at 21:36

This can't be done natively cross-browser, but it can be implemented with a fallback for unsupported browsers:

color: blue;
-webkit-text-stroke-color: blue;
-webkit-text-fill-color: white;
-webkit-text-stroke-width: 3px;

That way, webkit browsers will display white text with blue outline, but other browsers will still display the color of your choosing (this case blue).

text-stroke cross browser

4 Answers4