The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "SVG" Oct 14 - 6:30 PM Eastern
Get a free trial // Grow your CSS skills // Land your dream job

Proportional Circles with any amount of text

  • # March 21, 2013 at 6:12 pm


    I am using border radius set at 50% to make proportional circles in CSS. But I get elongated circles depending on the amount of text contained within the circle. Is there a way to keep the height proportional to the width given any amount of text.

    The first promotion (25%) works fine because I have set a particular padding that works for that amount of text. But the other 3 I get elongated circles. Here is my code so far:


    [Codepen example]( “Codepen Example”)

    # March 21, 2013 at 7:02 pm

    There might be some code missing?

    Also, create a [CodePen](

    # March 22, 2013 at 2:33 pm

    Added a link to a Codepen above.

    # March 23, 2013 at 7:32 am

    Here’s a pen with my solution

    Basically, a little jquery to size the outer divs, and nested divs with a little css to vertically center the text.

    I made another pen using .outerWidth and .outerHeight to give more padding for text, notice the long multiline text gets really close to the edges in the first example.

    The vertical centering method doesn’t work in IE8 or older.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed