How to make a circle around content using CSS?

Question

Like this

With only this code

<span>1</span> 

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.

Answer 2

Using CSS3:

span {-moz-border-radius: 20px;     border-radius: 20px; border-color:black;     background-color:black; color:white;     padding-left:15px;     padding-right:15px;     padding-top:10px;     padding-bottom:10px;     font-size:1.3em; } 

​ http://jsfiddle.net/NXZnq/