Draw a Circle in CSS
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.
Draw a Circle in CSS Demo
View Demo Full Screen View Demo New Tab
Draw a Circle in CSS Code
HTML
<div class="circle"></div>
<div class="circle-green"></div>
CSS
.circle {
width: 32px;
height: 32px;
background: #9C27B0;
border-radius: 50%;
}
.circle-green {
margin:20px;
width: 200px;
height: 200px;
background:green;
border-radius: 50%;
}