title: Hide the border when div is on top
body: <p>I am using the following html and css to design a div with a title and a button at bottom:</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>.main-container {
    height          : 100%;
    width           : 100%;
    position        : absolute;
    background-size : 100% 100%;
    display         : flex;
    align-items     : center;
    background-color: lightgreen;
  }
  
  .content{
    margin:auto;
    border: 1px solid #0d0d63;
    padding: 10px;
  }
  .title{
    top: -21px;
    position: relative;  
    border-bottom: 1px solid green;
  }
  .bottom-link{
    position:relative;
    top:19px;
    background-color:green;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;div class="main-container"&gt;      
          &lt;div class="content"&gt;
            &lt;div class="title"&gt;My Title&lt;/div&gt;
              test content
            &lt;div class="bottom-link"&gt;Bottom Link&lt;/div&gt;
          &lt;/div&gt;      
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>As you can see the title is crossed out because of the border. I can fix it by setting the background color to <code>title</code> class like I did for <code>bottom-link</code>. But the issue is I want the <code>background-color</code> ( or image if I add one) of the main-container to be visible throught the title. ie; I need the title div to be transparent. Is there any way to achieve this with css?</p>