title: How to make a border which wraps around text
body: <p>I would like to make a text element have a border around it like this in an upcoming ghost dashboard: <a href="http://i.imgur.com/YNSQ5Pw.png" rel="nofollow">Ghost blog</a></p>
  
  <p>I have done this: </p>
  
  <pre><code>    border: 10px solid #ffffff;
  </code></pre>
  
  <p>however that works for the height but not the width. The width is a lot wider. I know I could set the width to something however I would like the width to update when the text is changed, so there is always a certain amount of space between the text and box on each side.</p>
  
  <p>I'm not sure how to do this or if it needs JS or if it can be done with pure CSS.</p>