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 height and width Combination of properties with matching values:

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

Try it yourself