How to make a circle with CSS the easy way

In this post we’ll see how to make a circle with pure CSS, not using images or any other external resources, to have a code that is easy to maintain and perform.

How to create a circle with CSS: theory

Well, to create this geometric figure widely used with CSS, we must start with a square.

So an HTML element with established width and height is required.

From there the only thing we’ll need to do is add a 50% border-radius.

And then CSS will do the circle.

Circle with CSS: practice

Now let’s see in practice how to create the circle.

The HTML structure can be done this way, I used a div in this case, but it can be any element, see:

<div id="circle"></div>

Now with CSS, let’s create our square:

#circle {
    width: 100px;
    height: 100px;
    background-color: red;
    margin: 50px;
}

Note that the background color is just to stand out from the white HTML background, you can put any color.

And the margin is to move away from the browser’s corner to the print screen, these two rules are optional.

At this point we will have the following result:

Now when we complete the code with border-radius:

#circle {
     width: 100px;
     height: 100px;
     border-radius: 50%;
     background-color: red;
     margin: 50px;
}

We have the following result:

And then the circle is complete, cool right? 😀

So with just these few lines of code, we have something easier to maintain than if it were by image

Imagine creating a new image every time this circle changes color or size, it would be tense!

In addition to having to request one more file from your server, you need to optimize the image…

There are several reasons why creating a figure only with CSS is more advantageous

Final code for those who don’t want to read everything

Are you in a hurry? it’s in your hand!

<!-- HTML -->
<div id="circle"></div>

/* CSS */
#circle {
     width: 100px;
     height: 100px;
     border-radius: 50%;
     background-color: red;
     margin: 50px;
}

Conclusion

We saw that to create a circle with CSS we must first create a square with width and height with some value

So we should just apply the 50% border radius.

With this combination, the square will turn into a circle, made only with CSS 🙂

And that’s it for today, until the next post!

How to make a circle with CSS the easy way