How to make more than 1 geometric body

Question

I was trying to make the geometric bodies. When I finished the square then the circle, the circle became a square.

The code went like this:

.square {
  height: 50px;
  width: 50px;
  background-color: blue
}

.circle {
  height: 50px;
  width: 50px;
  background-color: blue
}

Answer 1

you need to provide border-radius as 50%, try this

.circle{
      height: 100px;
      width: 100px;
      background-color: #bbb;
      border-radius: 50%;
      display: inline-block;
    
 }