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:

like

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.

Onwards!

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:

rectangular

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:

example

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.

dimensions

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.

Conclusion

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.

If you have a question about this or any other topic, the easiest thing is to drop by our forums where a bunch of the friendliest people you'll ever run into will be happy to help you out!

THE KIRUPA NEWSLETTER

Get cool tips, tricks, selfies, and more...personally hand-delivered to your inbox!

( View past issues for an idea of what you've been missing out on all this time! )

WHAT DO YOU THINK?

NEWSLETTER

No spam. No fluff. Just awesome content sent straight to your inbox!

Awesome and high-performance web hosting!
BACK TO TOP
new books - yay!!!