title: Text shadow outline not complete in corners
body: <p>I'm trying to <strong>add an outline to text using the <em>CSS</em> <code>text-shadow</code> property</strong> <a href="https://jsfiddle.net/user3052443/28uh6hoo/" rel="noreferrer">here</a>.<br>
  The problem is that the shadow corners don't always meet. If you look below, you can see the problem on the upper right corner of the Y.<br>
  It doesn't look too bad with this font but with some fonts that my code uses it makes a big difference. </p>
  
  <p>Is there a way to have the <strong>text completely surrounded by the box-shadow</strong>, especialy in the cornerns?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.shadowOutline {
    font: normal 200pt Arial;color: #fff;
    text-shadow: 
      -1px  1px #ff0000, 
      -1px -1px #ff0000, 
       1px  1px #ff0000, 
       1px -1px #ff0000, 
      -2px  2px #ff0000, 
      -2px -2px #ff0000, 
       2px  2px #ff0000, 
       2px -2px #ff0000;
    -webkit-font-smoothing: antialiased;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="shadowOutline"&gt;My&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>