How to make a circle around content using CSS?

Question

Like this

With only this code

1
         


        

Answer 1

http://jsfiddle.net/MafjT/

You can use this css

span {
    display: block;
    height: 60px;
    width: 60px;
    line-height: 60px;

    -moz-border-radius: 30px; /* or 50% */
    border-radius: 30px; /* or 50% */

    background-color: black;
    color: white;
    text-align: center;
    font-size: 2em;
}

Because you want a circle, you need to set the same value to width, height and line-height (to center the text vertically). You also need to use half of that value to the border radius.

This solution always renders a circle, regardless of content length.

---

But, if you want an ellipse that expands with the content, then http://jsfiddle.net/MafjT/256/

---

Resize with content - Improvement

In this https://jsfiddle.net/36m7796q/2/ you can see how to render a circle that reacts to a change in content length.
You can even edit the content on the last circle, to see how the diameter changes.