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
    * 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.


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.

3 reacties

  1. Thanks a lot.
    I’ve been circling around in search of a solution like this.

  2. Thank you, been messing around for an hour trying to get the responsiveness right without using breakpoints!

Reacties zijn gesloten.