Sometimes you need to go back to the basics. Here we have two nice circle's drawn with css. You can see how we do this below. 

How do you draw a circle with css?

Add a div element with the class circle. 

HTML

<div class="circle"></div>

Now we have a div, we need to add some styles to it to make it a circle. 

Give it a height and width of 32px and then set the background colour.

CSS

.circle {
  width: 32px;
  height: 32px;
  background: #9C27B0;
}

This is actually just a pink square...

So how to make it a circle?

We can now add a border-radius property to our circle class. We will set the value of this to 50% as this will make the square borders rounded no matter what size we make the circle. 

Like this:

CSS

.circle {
  width: 32px;
  height: 32px;
  background: #9C27B0;
  border-radius: 50%;
}

So now if we change the background to green and the width and height to 200, we will have a large gree circle in addition to our pink circle. 

Add another element with the class circle-green and another class also called circle-green

HTML

<div class="circle-green"></div>

CSS

.circle-green {
  margin:20px;
  width: 200px;
  height: 200px;
  background:green;
  border-radius: 50%;
}

And that is how you can make a div into a circle using CSS.