title: 'Text Border' Decoration in CSS
body: <blockquote>
  <p><strong>Possible Duplicate:</strong><br />
  <a href="https://stackoverflow.com/questions/2570972/css-font-border">CSS Font Border?</a></p>
  </blockquote>
  
  <p>When I'm in Photoshop, it's easy for me to type a text and then apply white border to the 'text' and then apply shadow into it.<br/>
  <img src="https://i.stack.imgur.com/m7Z7F.jpg" alt="enter image description here" /></p>
  <p>But when I'm in HTML, I need a <code>&lt;div&gt;</code>, <code>&lt;p&gt;</code> or <code>&lt;span&gt;</code> or any tag like this to write a text. Then to decorate the text like this, we especially apply the decoration to the tag, NOT TO THE TEXT (or content) of the tag. Suppose:</p>
  <pre><code>&lt;span id=&quot;decor&quot;&gt;Text&lt;/span&gt;
  </code></pre>
  <p>Then we do CSS like:</p>
  <pre><code>#decor{color: #9E0B0E; border: 5px solid #FFF; box-shadow: 3px 0 2px #CCC;}
  </code></pre>
  <p>But what it does is to style the span, not the content of the span tag (for here: 'Text').</p>
  <p>So, my question is:</p>
  <ul>
  <li><strong>HOW TO STYLE TEXT LIKE THIS USING <code>CSS</code>?</strong></li>
  </ul>
  <br/>
  <h3>SECOND EDIT</h3>
  <p>After some comments and replies, PLEASE CONSIDER THAT, The <code>text-shadow</code> property is doing only one job, whether a white border or a grey shadow, but I want 'em BOTH.</p>