How to draw a circle in CSS?

andy - 22 Oct, 2019 2703 Views 0 Comment

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.

    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.


There are no comments available.

Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.

Related Articles

How to create rounded image using CSS3?

In this tutorial you will learn on how to create a rounded image in CSS3. We will use CSS property called border-radius to create this rounded image effect.