cross browser text outline thickness using css

Am in a need to provide outlines for text. These text say for eg: can be League name like Barclays Premier league, National Football League etc.

The closest i came with cross browser support is from the link below

https://www.alphachannelgroup.com/almost-cross-browser-text-stroke-outline-text/

but i would need thickness of outline that can vary between 10 - 20 pixels,

which am struggling to do. Please help

This is what i did

<style>
.element {
width: auto;  
     height: auto; /* width/height so IE7 and lower will work */  
     filter: glow(color=black,strength=1);  
     text-shadow: -10px -10px 0 #000,   
     10px -10px 0 #000,   
     -10px 10px 0 #000,   
     10px 10px 0 #000;
     font-size:56px;
     font-weight:bold;
     color:#FFF;  
}
</style>

and my div is

<div class="element">Hello Stranger</div>

and my output is blurry the screenshot is given below.

http://screencast.com/t/v9WPv9saYoS

the output am trying to get is given below

http://screencast.com/t/lMe1bubFht

the outline which is in color blue must be more thicker for me say 10px or 20px

thats what am trying to achieve.

UPDATE

failing to do so with text-shadows. am now trying cavas methods given link below

http://www.html5canvastutorials.com/tutorials/html5-canvas-text-stroke/

but still the thickness seems a problem i adjusted lineWidth to 10 and well it just

didnt work.... may be there exists some other option in canvas..if someone knows plese help.

Solution

Although -webkit-text-stroke is still non-standard feature and is not recommended for production, it has very good support in all modern browsers. To make edges softer you can add multiple shadows with blur-radius equal to 0.5 of text-stroke-width. Also it would be good enough fallback for IE and Opera Mini (see the snippet).

@import url("https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap");
p {
  font-family: sans-serif;
  font-size: 80px;
  line-height: 80px;
  color: #eee;
}
.p1 {
  font-family: "Permanent Marker";
}
.p2 {
  font-family: sans-serif;
  font-weight: 700;
}
.stroke {
  text-stroke: 6px black; /* doesn't work yet, requires -webkit- */
  -webkit-text-stroke: 6px black;
}
.shadow {
  text-shadow: 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black
}

<p class="p1 stroke">Text-Stroke 123 456 789 0</p>
<p class="p1 stroke shadow">Text-Stroke 123 456 789 0 + Shadow</p>
<p class="p2 stroke">Text-Stroke 123 456 789 0</p>
<p class="p2 stroke shadow">Text-Stroke 123 456 789 0 + Shadow</p>
<p class="p1 shadow">Fallback 123 456 789 0</p>
<p class="p2 shadow">Fallback 123 456 789 0</p>