title: text in border of a div tag
body: <p>I know this is an old question, but I wanted to know what is the best way to put text into a border of a div tag.  This is what I have</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.componentWrapper {
    border: solid cadetblue;
    border-radius: 40px;
    padding: 10px;
    width: 95%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class='componentWrapper'&gt;Text inside div &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I want to add a title into the border of the div tag.  I know one option is to use fieldsets but I prefer not to go with this approach.  Another approach is the put a box and move it up and set the background color, but I think this fails when you set a different background color on the page.  </p>
  
  <p>What is the best solution for this?</p>