title: Add stroke around text - on the outside - with css?
body: <p>I have the following HTML and CSS:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body { background-color: gray; }
  h1 {
    color: white;
    font-size: 2.5em;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1&gt;WHAT CARRER SHOULD YOU HAVE ?&lt;/h1&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Which renders like this:</p>
  
  <p><img src="https://i.stack.imgur.com/oEiKd.png" alt="enter image description here"></p>
  
  <p>I want to add a stroke around it, that means a black border around these text.<br>
  I Googled and found <code>-webkit-text-stroke</code>, and came up with:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body { background-color: gray; }
  h1 {
    color: white;
    font-size: 2.5em;
    -webkit-text-stroke: 2px black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1&gt;WHAT CARRER SHOULD YOU HAVE ?&lt;/h1&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>However, the effect is not what I want:</p>
  
  <p><img src="https://i.stack.imgur.com/GwDAS.png" alt="enter image description here"></p>
  
  <p>As you can see, it seems that the stroke is added <strong>inside</strong> the text, which make the text looks too thin for me.</p>
  
  <p>How can I make the stroke outside the text?</p>
  
  <p>Fiddle: <a href="http://jsfiddle.net/jpjbk1z7/" rel="noreferrer">http://jsfiddle.net/jpjbk1z7/</a></p>
  
  <p>PS: only webkit support is needed</p>