In this article, we are going to learn how to draw a circle in CSS. Firstly what needs to do is to create a CSS class called circle. Then we need to specify the height and width of our circle properties. In this example, I am going to set the width and height to 100px.
For visibility, the next step is to set the background color or the border color so we can see how the circle will look like. In this example, I am going to use the background color. I am going to set the color to red.
The last step is to use the border-radius property. In order to make it circle, we need to set the value to 50%. Here is the final code of our CSS class.
.circle{
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%;
}
Here is the code on how to use it in HTML.
<div class="circle"></div>
Quick Demo
You can see the quick demo below.
Alternatively, if you want to play around with the HTML and CSS, you can visit the following link via CodePen.