How to place a circle inside a square box in css?

Admin 1
Viewed 11517

I have a webpage made in HTML and CSS in which I want to put a circle inside a square box. Here is the fiddle for the webpage.

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 pictorial representation of what I want.

The HTML and CSS codes which I am using for the square boxes are:

<div class="rectangles">
            <div class="rectangle">

                <p class="ceo">Will's profile, CEO</p>
                <p class="ceo-words">Say something inspiring will</p>
            </div>

            <div class="rectangle">

                <p class="cfo">Jacks Profile, CFO</p>
                <p class="cfo-words">Say something inspiring jack</p>
            </div>

            <div class="rectangle">

                <p class="cto">Zeeshan, CTO</p>
                <p class="cto-words">Say something inspiring </p>
            </div>

            <div class="rectangle">

                <p class="future">Whoever yall hire next</p>
                <p class="future-words">Say something inspiring </p>
            </div>
        </div>
bootstrap-4 twitter-bootstrap css html
5 Answers

Can use this solution too

div:first-of-type{
  height:200px;
  width:200px;
  border:1px solid black;
  position:relative;
}

.square>div:nth-of-type(1){
  border-radius:50%;
  height:100%;
  width:100%;
  border:1px solid black;
}
<div class="square">
  <div class="circle">
    
  </div>
</div>

user_65040760
Related