CSS: Cuadrados y Círculos

<div style="text-align:center">
    <span class="square1"></span>
    <span class="square1"></span>
    <span class="square1"></span>
    <br>
    <span class="square2"></span>
    <span class="square2"></span>
    <span class="square2"></span>
    <br>
    <span class="square3"></span>
    <span class="square3"></span>
    <span class="square3"></span>
    <br>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <br>
</div>

.square1 {
  height: 25px;
  width: 25px;
  background-color: #007587;
  border-radius: 0%;
  display: inline-block;
}
.square2 {
  height: 25px;
  width: 25px;
  background-color: #007587;
  border-radius: 15%;
  display: inline-block;
}
.square3 {
  height: 25px;
  width: 25px;
  background-color: #007587;
  border-radius: 30%;
  display: inline-block;
}
.dot {
  height: 25px;
  width: 25px;
  background-color: #007587;
  border-radius: 50%;
  display: inline-block;
}