title: Create a border around 2 divs
body: <p>Just a quick question...</p>
  
  <p>I have created two divs - essentially two squares, one large one small - positioned one beneath another.</p>
  
  <p><a href="https://i.stack.imgur.com/CLNsx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CLNsx.png" alt="enter image description here"></a></p>
  
  <p>I would like to put a border around both of these divs to outline the entire shape - not an outline around both divs as I have done in the picture - It leaves the line between which I have circled in the image. Is this possible? </p>
  
  <p>Here is the the html and css for the divs:</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>#shapeTop {
    height: 70px; 
    width: 70px; 
    background: blue; 
    float: right; 
    outline: 4px solid black;
  }
   
   #shapeBottom {
    height: 420px; 
    width: 420px; 
    background: blue; 
    clear: both; 
    float: right; 
    outline: 4px solid black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="shape"&gt;
    &lt;div id="shapeTop"&gt;
    &lt;/div&gt;
    
    &lt;div id="shapeBottom"&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thank you in advance - G</p>