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 »
