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.

You might also like :

• How to target an element with multiple classes in CSS
• Custom website cursors