title: How can I make a CSS only speech bubble with a border?
body: <p>I want to make a CSS only speech bubble. So far, I have this...</p>
  <h3>Example</h3>
  <p><img src="https://i.stack.imgur.com/gc425.png" alt="Bubble example" /></p>
  <h3>CSS</h3>
  <pre><code>div {
      position: relative;
      background: #fff;
      padding: 10px;
      font-size: 12px;
      text-align: center;
      -webkit-border-radius: 20px;
      -moz-border-radius: 20px;
      border-radius: 20px;
  }
  
  div:after {
      content: &quot;&quot;;
      display: block;
      width: 0;
      height: 0;
      position: absolute;
      left: 50%;
      bottom: -60px;
      margin-left: -15px;
      border-width: 30px 20px 30px 20px;
      border-style: solid;
      border-color: #fff transparent transparent transparent;
  }
  </code></pre>
  <p><a href="http://jsfiddle.net/alexdickson/vgk6p/" rel="nofollow noreferrer">jsFiddle</a>.</p>
  <p>...which is <em>almost exactly</em> what I want. However, I want a light border around the whole thing.</p>
  <p>Obviously, on the main portion, that is simple as adding <code>border: 1px solid #333</code> to the <code>div</code>.</p>
  <p>However, as the tail of the bubble is a <em>border hack</em>, I can't user a border with it.</p>
  <p>I tried setting a box shadow of <code>0 0 1px #333</code> but browsers apply the border to the rectangular shape of the element (which I guess is what they <em>should</em> do).</p>
  <p><a href="http://jsfiddle.net/alexdickson/JyPBD/" rel="nofollow noreferrer">jsFiddle</a>.</p>
  <p>My next thoughts were finding a Unicode character that looks like a bubble tail and absolutely positioning it there, with <code>text-shadow</code> for the border and using <code>z-index</code> of the main bubble to hide the top shadow of the text.</p>
  <p>What Unicode character would be suitable for this? Should I do something different? Do I need to resort to an image?</p>
  <p>I only have to support Mobile Safari. :)</p>