title: Make a circular border around text
body: <p>Right now I would like to have a plus sign with a circle around it.</p>
  
  <p><a href="http://jsfiddle.net/dtracers/cvtztcy1/1/" rel="nofollow">http://jsfiddle.net/dtracers/cvtztcy1/1/</a></p>
  
  <pre><code>&lt;h1&gt;TEXY TXT &lt;span&gt;+&lt;/span&gt;&lt;/h1&gt;
  
  &lt;style&gt;
  span {
      border-radius: 50%;
      border-style:solid;
      border-width: 1px 3px 1px 1px;
      padding:0px;
      padding-bottom:0.125em;
      cursor:pointer;
      margin:0px;
  }
  
  /* Just to see if that would modify anything */
  h1 {
      padding:0px;
      margin:0px;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>After looking at it you can tell that this is not a circle but instead an elipse.
  I have realize that it is the text height that is causing this issue but is there a way to make it appear closer.</p>
  
  <p>The background is dynamic so I can not use an image.
  And I would rather not have a floating element that depended on absolute positioning.</p>
  
  <p>I would also like the circle in height to be equal to its current width.
  I know I can just make it wider but I don't want a giant circle I want a tight small circle</p>
  
  <p><strong>EDIT</strong>
  For those that are saying this is the same question it is kinda.
  The difference between what I am asking and what that person is asking is that in their case the circle is larger than the bounds of the text.</p>
  
  <p>What I am asking is for a circle that is smaller than the bounds of the text.
  As such none of the solutions given there will apply to my question.</p>