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.

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.

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.

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.

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.

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: