Responsive circles with CSS3

Ever needed to create a circle with CSS only? Before CSS3 that was quite impossible (apart from the content: ' \25CF'; with a large font-size). But with CSS3, you can even create responsive circles!

Let’s say the width of your circle is 25% of the container div. If your circle is in a square div, you could easily give the circle a height of 25% as well, and all is fine (based on the assumption your container is a responsive square). But if your container has a flexible height, the following code will help you out:

.circle {
   height: auto;
   padding-top: 25%;
   width: 25%;
   border-radius: 50%;
   /**
    * Update November, 2014
    * http://caniuse.com/#search=border-radius
    * prefixes -webkit- and -moz- no longer really needed
    */
}

You can find a demo here.

See what happened?
Percentages defined within a padding in CSS, are calculated based on the width of the container. This means that if you use a padding-top to the circle that equals the width, it will give the element the same height as its width.

Enjoy!

P.S. You could also define the width of the circle as a padding-left with “10%” and give the circle a “display: inline-block” or a “display: block; width: auto; float:left;” to accomplish the same thing. I prefer setting the width, as it doesn’t require me to define the block as an inline-block, or a floating block, which will require you to clear the floats again, or find a backwards-compatibility solution for IE7 and lower.