How to create: hollow circle

Learn how to create a hollow circle using CSS.

How to create a hollow circle

First step - Add HTML:

<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>

Second step - Add CSS:

To create a circle, use border-radius attribute and set the value to 50%. Then, set the height and width Combine the attribute with the matching value:

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

Experimente você mesmo