How to create: hollow circle

Learn how to create a hollow circle using CSS.

How to create a hollow circle

Step 1 - Add HTML:

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

Step 2 - Add CSS:

To create a circle, please use border-radius property and set the value to 50%. Then set the height and width Use the combination of properties and matching values:

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

Try it yourself