Creating Circular div for CSS3 compatible browsers

Up until the introduction of CSS3 if you wanted to display your text in a circle you had to be creative using images or other techniques. The implementation of CSS3 has changed that and you can now transform your <div> into a nice round object.

I was playing around with some of the CSS3 features that are already supported by the modern browsers (Note: The techniques I’m going to be covering here are not yet supported by IE) and I thought to myself. Hell, I have all the tools to make a round <div> at my disposal, so why not do it.

For my example I’ll be creating a standard 128*128 black circle with some white text inside it.

Step 1:

Create your standard square <div> with your desired size. Give it an ID and then move on to your style sheet. I gave my <div> the very creative name “circle”.

In your style sheet we’re going to make some adjustments.

#circle { 
    background:black;
    height:128px;
    width:128px;
}

First thing to do is cut your width in half, the reason for this will be explained shortly. So your css should now look like this:

#circle {
    background:black;
    height:64px;
    width:64px;
}

Step 2

Now we’ll actually create our circle. The way we do this is by just creating large rounded corners on our borders. Set the radius to the same size as your height/width.

#circle {
    background:black;
    height:64px;
    width:64px;
    -moz-border-radius:64px;
    -webkit-border-radius:64px;
}

You’ll notice that you don’t have a circle yet. The reason for this is that we have to add some padding. This will also make sure that any text we add to our circle is actually displayed inside it and not cut off by it or overlaps the edges.

Step 3

Now we’ll add our padding and one or 2 other features to finish off our circle.

#circle {
    background:black;
    height:64px;
    width:64px;
    -moz-border-radius:64px;
    -webkit-border-radius:64px;

    padding:32px;
    text-align:center;
    color:white;
}

Now you should have a nice round circular <div> to which you can add text.

Summary

  1. 1. Create your normal div with the desired size.
  2. 2. Half the height and width and create rounded borders with the same size as your height/width.
  3. 3. Add padding equal to half of your height/width.

An example can be seen here.

Additional Notes:

If you deside to add a border you may sometimes notice that there may be gaps between the body of your <div> and the border. I solved this issue by adding a simple drop shadow to my <div> with a radius of 0 and the same color as my body.

For example: Your <div> might look as follows:

    background:black;
    height:60px;
    width:60px;
    -moz-border-radius:64px;
    -webkit-border-radius:64px;
    padding:32px;
    text-align:center;
    color:white;

    border:2px solid orange;

Note: I subtract double my border width from my height and width to maintain the circular shape.

On certain browsers you might notice some of your background coming through between the edges of your body and border. So add the following lines to your element’s style:

-webkit-box-shadow: 0 0 1px rgb(255,0,0);
-moz-box-shadow: 0 0 1px rgb(255,0,0);
box-shadow: 0 0 1px rgb(255,0,0); 

Replace the rgb values with the value of your body or border. [I personally prefer the border color] What this does it drops a shadow with the same color as your body/border behind your <div> smoothing out the rough edges and gaps that may appear between the div and the border.

Depending on the amount of text you have in your <div> you might want to adjust your padding. The general rule is you subtract double the horizontal padding from your width and double the vertical padding from your height. Except if you add left/right top/bottom specific padding.

7 Responses to “Creating Circular div for CSS3 compatible browsers”

  1. Dileep says:

    Waaaaaaav…..Great one for newbies….appreciation needed ,

  2. This is a cool tip. Just wanted to point out that your border-radius actually only needs to be half of your width/height. Anything over that is ignored. This also solves your weird border issues as well.

  3. Also, padding causes problems on most browsers with border-radius. It’s best to put a div inside the circle. To maximize useable space, its dimensions should be width=height=2*(radius/sqrt(2)) and left=top=radius-(radius/sqrt(2)). Using the proper radius (i.e. 1/2 width) there is no need to fiddle with adding border width, using box-shadow to preserve the circle, or halving the height. So it would be:

    This is a circular div

    #circle { 
      background: black; 
      width: 128px; 
      height: 128px; 
      border-radius: 64px; 
      border: 2px solid orange; 
    }
    #circle div { 
      position:relative; 
      left: 19px; 
      top: 19px; 
      width: 90px; 
      height: 90px; 
      color: white; 
      text-align:center; 
    }
    

    The calculations are width=height=2*(64/sqrt(2))=2*(~45)=90 and top=left=64-(64/sqrt(2))=64-(~45)=19. The code is at: http://jsfiddle.net/ThinkingStiff/WPh22/

  4. Technbuzz says:

    It was always pain for me to find right radius; in order to make div circular, but thanks to this article which shows some great tips;

  5. Vlad says:

    I was thinking of how to add click/hover event to circular elements. I tried this using an animated image map overlay http://bit.ly/LDFY5P Could this work for round divs?

  6. Tom Groot says:

    Great! You only miss one thing, for the compatibality for Explorer users like me! :D
    Just add: border-radius: 64px; at the css sheet!

Leave a Reply