title: How to outline text with html5/css3?
body: <p>I'm trying to use shadow to outline text -- a solution I got from other stackoverflow threads.  Currently, text-outline and text-stroke are barely supported.</p>
  
  <p>I'm getting a strange behavior on one of the letters.</p>
  
  <p>To use the shadow hack I did:</p>
  
  <pre><code>&lt;div id="background"&gt;
   &lt;h1 id="buzz-joy"&gt;BU&lt;span id="small-raised-z"&gt;Z&lt;/span&gt;Z-JOY&lt;/h1&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and</p>
  
  <pre><code>#background {
      height 100px;
      text-align: center;
      background-color: grey;
  }
  #buzz-joy {
      font-family:"Arial Black";
      color: Yellow;
      font-size:4em;
      display: inline-block;
      text-shadow: 2px 2px 0 black, 2px -2px 0 black, -2px 2px 0 black, -2px -2px 0 black;
      padding: 0;
      margin: 0;
  }
  </code></pre>
  
  <p>to get</p>
  
  <p><a href="http://jsfiddle.net/abalter/e3QUp" rel="nofollow">http://jsfiddle.net/abalter/e3QUp</a></p>
  
  <p>But I get a strange behavior on the "Y".</p>
  
  <p>Any suggestions for how to fix that problem?</p>