How TO - Circles


Learn how to create empty circles with CSS.



How To Create Circles

Step 1) Add HTML:

Example

<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
Step 2) Add CSS:

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

Example

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

Copyright 1999-2023 by Refsnes Data. All Rights Reserved.