Creating Circles Using HTML/CSS

by kirupa   |   24 March 2013

It is no secret that I like circles. I like them a lot - especially little blue ones:


In HTML, for the longest time, you couldn't create circles. If you wanted a circle, you had to use an image or painfully draw one on a canvas. For a lot of reasons that I cover later, both of those options aren't particularly appealing.

Fortunately, things evolved a bit. Today, you can manipulate circles out of normal HTML DOM elements using a roundabout (ha!) way. You'll see how in this tutorial.


Meet border-radius

By default, every single element you create in HTML is rectangular. Even if you are looking at text or some other content that doesn't necessarily look like it should be rectangular, don't worry. That element is still rectangular. You can easily check by just giving that element a background color and seeing the sharp edges in all their glory:


To override this default behavior, you have the border-radius CSS property. This property allows you to specify the roundedness of your element's corners. Check out my Rounding Corners in CSS3 tutorial if you aren't too familiar with it, but you only need to know one thing. That thing is that the border-radius property allows you to not only round the edges of your elements but, ultimately, turn those elements into full-fledged circles.

Making Circles

To create a circle in HTML, make sure the content you want to "circle-ize" is a square. This is easy for simple content. For complex content, just remember that paddings, borders, and other things that you apply could affect the final width and height of your elements even if the width and height properties are explicitly set to be the same value.

 I'm going to stay simple for this example. I'm going to be using a 256 x 256 image with the border CSS property set to have a width (border-width) of 10 pixels:


The CSS for this image looks as follows:

#picture {
	border: 10px #333 solid;

Now, to turn your square into a circle, set the border-radius property on your element to exactly half of your element's total width or height. My image's size is 256 pixels on each edge and my border has a 10 pixel width.


The total height of my image is 276 pixels (256 pixels + 10 pixels + 10 pixels). Therefore, my border-radius property will be set to half of that, which is 138 pixels:

#picture {
    border: 10px solid #333333;
    border-radius: 138px;

The result of this CSS applied to our image looks as follows:

rounded image

Your once square content is now displays as a circle!

Now, if you don't want to perform some simple math wizardry to calculate the total size of any of your element's edges, you do have another way of specifying the border-radius value. You can use a percentage value and set your border-radius to 50% to convert your circle into a square instead:

#picture {
    border: 10px solid #333333;
    border-radius: 50%;

This works for me, but it may not work for you or your visitors. Based on the results of this web search, I would recommend not using percentage values unless you really want to.


I mentioned earlier that creating circles out of your normal DOM elements is better than using images or drawing them using the canvas. Let me elaborate why. Let's get the obvious things out of the way - your DOM elements work well with CSS. They can be hit-tested, placed in your layout, and easily manipulated using JavaScript. If your DOM element displays content, you can change the content very easily without having to personally deal with how that affects any parents or children.

Advantage over Canvas

Picking on circles drawn on a canvas is easy. Every single advantage listed earlier is lost when using a canvas. You can regain these advantages by writing a lot of code, but at that point, you should question whether using a canvas is even worth the effort.

Advantage over Images

Your img tag is 100% a DOM element. Most of the advantages I listed earlier still apply. The only thing that makes images less appealing is that the content is baked into your image itself. If that doesn't matter to you, then using an image of something circular is fine.

Extra: What About SVG?

You can use SVG to draw circles, and these are elements that live in your HTML. These elements also can be styled using CSS. I am a huge fan of SVG, but I put them just one step below images in how viable of a replacement they are for the border-radius trick. They lose a few points because even fewer browsers support them when compared to the reasonably new border-radius property.

Getting Help

If you have questions, need some assistance on this topic, or just want to chat - post in the comments below or drop by our friendly forums (where you have a lot more formatting options) and post your question. There are a lot of knowledgeable and witty people who would be happy to help you out


Did you enjoy reading this and found it useful? If so, please share it with your friends:

If you didn't like it, I always like to hear how I can do better next time. Please feel free to contact me directly via e-mail, facebook, or twitter.

Brought to you by...

Kirupa Chinnathambi
I like to talk a lot - A WHOLE LOT. When I'm not talking, I've been known to write the occasional English word. You can learn more about me by going here.

Add Your Comment (or post on the Forums)

blog comments powered by Disqus

Awesome and high-performance web hosting!
new books - yay!!!