How to Draw a Circle with CSS

When it comes to web design, you’ll find CSS shapes everywhere. Squares, rectangles and a box are the most common because they maximize space on devices like desktops or tablets; but if you want your website stand out from others in terms of its creativity (or just looking cool!), try circles.

Creating shapes is easy with HTML and CSS and a CSS circles is no exception. Once you’ve mastered these basics, it’s time to impress your clients by making other shapes besides basic shapes that will blow them away!

As a professional engineer and designer I have used circles countless times in my own designs as well as for clients. This shape is the most important to design and art. We use it literally everywhere. Just think about it for a minute, where have you seen circles in the world and in design? Any basic art class will start you off right away drawing countless circles until you can perfect them. They are the building blocks of our creations.

So let’s draw a CSS circle! To do this, we need to create define simple HTML and CSS. First add an HTML element that can be manipulated and styled with CSS. Let’s start off by creating a div with a class of circle. This will be the very beginning of our circle, but it won’t look like anything yet until we have changed our code.

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

If you are curious about seeing more CSS examples, we have a ton of them so browse around and see what else you can make with a simple circle.

You’ve worked with HTML code before haven’t you? If you have any background with HTML you already know that div is called a block level element for a reason. A div starts out invisible and has an height of 0. You can think of a div element like a rectangle without any height. If you want to use another HTML element for this exercise such as a span tag, you can, but note that you will need to change the display property to transform it to a block level element.

Once we add the width and the height for our div and include a background color it will start to take shape. If you give the width and height equal values you will create another one of our basic shapes, the square. If you want to change the background color of our first value, feel free to fix it and the square should update. If you want to change the width, do not as we will not be able to create a circle. For an actual circle the square needs to have equal width and height.

Now that we can see our div element as a box, we can transform it into a circle. All we need to do is add border radius property with a value of 50% and we have created the perfect circle.

.circle {
    background-color: lightblue;
    height: 100px;
    width: 100px;
    border-radius: 50%;

What does the border radius property do? The border-radius CSS property rounds the corners of an element’s outer border edge. With the border radius property you can create other CSS shapes as well such as an oval or a square with rounded corners.

It’s awesome, isn’t it? Using the simple border radius property to a simple circle from simple rectangles in this example can make such an impact in your design and development career. What would more shapes do for you? Circles are actually a 2021 design trend shape so make sure you learn how to make these as well as a responsive circle.

Feel free to start playing with the border radius property to see what happens! What would happen if you set each individual one at different values from 0-100% or even px instead of percentage – all possible options await you.

Try removing the same value of the border radius property and instead use the individual properties with their own values. Give the border radius property two values. Are you able to make an interesting shape? What if you add a background image to the circle or change the width and height to not be equal width?

Tricks: You can use pseudo elements to create CSS circles for a shape outside such as a rectangle with varying properties, width and height and offset or change their position values for a more complex image. If you want to create a responsive circle, change the width and height to a percentage.

Some fun things to try when editing this CSS example: Create a shape outside of your circle. Use the display property or add a flex container to wrap and center align your circle. Give the circle a border and try to create images that are more complicated. Use your main circle as a container and insert another circle relative to the main circle.

Also try making a simple button. A standard button is a box with a small border radius, a little padding bottom, padding top and your text align set to left or center. When you add padding bottom or top you create a nice cushion for your text. Aligning left is not standard but it is seen out in the wild. Make sure you do not have text wrap set since buttons should always have the text left on the same line.

I once made a fun tool that was basically a CSS example generator. You had a canvas where you could drag and drop basic shapes such as a circle element. You had no limitations on any element and could edit the CSS directly on the left half of the editor. If you wanted you could cover the entire canvas with circles you could do that too. The best examples of circles I found was creating emojis. Once you think outside of the box and start adding a shape outside of the main shape, your possibilities are endless.

Unfortunately I did close the tool down and no longer support it. I enjoyed using it and might bring it back online someday. In fact it was this site that was originally the tool which I’m sure you gathered from the name.

Do you remember awesome face? Well that just started out as a simple box and shape with a border radius 50% value. Once you add another shape, center it or fill it will another color you can inset yet another shape to create the eyes center on the face. Eyes are also just another inset shape with a radius and the pupils yet another inset center shape.

Think about it, an emoji is just an image created from the basic circle shape. Using CSS you can change the position value of an inset circle to create a new shape. Given that example you could offset and position other CSS shapes with their own CSS too. With the right position you can fill your shape to create images that add value to your content.

Try to manipulate your box shape and don’t be afraid to change the width or radius. If you want to create a shape outside the circle shape. What if you wanted to make a sphere instead? For a sphere you can add a gradient background and a box shadow to make it look 3D.

Check out the below example to see how we create circles. You can edit the example directly to preview your changes to the circle immediately.

What do you think about our box and block level element now? It seems to me we can build so many things with a box when left to our imagination. Building out shapes as a designer or developer can be a lot of fun and also really useful.

What can you make with HTML and CSS circles? Where will your creativity take you? If you are a designer or developer, let us know what cool examples you’ve made in your experience. I always love seeing what people have come up with and the neat tricks they’ve learned over the years.

See the Pen
CSS Circle
by (@DrawCSSTutorials).light

Leave a Reply

Your email address will not be published. Required fields are marked *

You May Also Like

CSS all Property

As a front-end developer, it’s important to have a solid understanding of all the CSS properties available to…

What is CSS?

You might be familiar with HTML and have even written basic CSS in your web development experience, but…