title: How to place a circle inside a square box in css?
body: <p>I have a webpage made in HTML and CSS in which I want to put a circle inside a square box. Here is the <a href="https://jsfiddle.net/r469bcx4/7/embedded/result/" rel="nofollow noreferrer">fiddle</a> for the webpage. </p>
  
  <p>At this moment, I am able to make a square containing some words in it but I am unable to put a circle inside the square box. Here is the <a href="https://postimg.org/image/m5f1zue0j/" rel="nofollow noreferrer">pictorial representation</a> of what I want. </p>
  
  <p>The HTML and CSS codes which I am using for the square boxes are:</p>
  
  <pre><code>&lt;div class="rectangles"&gt;
              &lt;div class="rectangle"&gt;
  
                  &lt;p class="ceo"&gt;Will's profile, CEO&lt;/p&gt;
                  &lt;p class="ceo-words"&gt;Say something inspiring will&lt;/p&gt;
              &lt;/div&gt;
  
              &lt;div class="rectangle"&gt;
  
                  &lt;p class="cfo"&gt;Jacks Profile, CFO&lt;/p&gt;
                  &lt;p class="cfo-words"&gt;Say something inspiring jack&lt;/p&gt;
              &lt;/div&gt;
  
              &lt;div class="rectangle"&gt;
  
                  &lt;p class="cto"&gt;Zeeshan, CTO&lt;/p&gt;
                  &lt;p class="cto-words"&gt;Say something inspiring &lt;/p&gt;
              &lt;/div&gt;
  
              &lt;div class="rectangle"&gt;
  
                  &lt;p class="future"&gt;Whoever yall hire next&lt;/p&gt;
                  &lt;p class="future-words"&gt;Say something inspiring &lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>