http://jsfiddle.net/MafjT/

Вы можете использовать этот 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;
}

Поскольку вам нужен круг, вам необходимо установить одинаковое значение для ширины, высоты и высоты строки (для центрирования текста по вертикали). Вам также необходимо использовать половину этого значения для радиуса границы.

Это решение всегда отображает круг независимо от длины содержимого.

Но если вам нужен эллипс, который расширяется вместе с содержимым, тогда http://jsfiddle.net/MafjT/256/

Изменение размера с содержимым - Улучшение

В этом https://jsfiddle.net/36m7796q/2/ вы можете увидеть, как визуализировать круг, который реагирует на изменение длины содержимого.
Вы даже можете редактировать содержимое последнего круга, чтобы увидеть, как изменяется диаметр.

Используя 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/

У вас есть много ответов, но я постараюсь рассказать вам основы.

Первый элемент - это встроенный элемент, поэтому, задав ему маржу сверху, нам нужно преобразовать его в блочный элемент. Я перешел на встроенный блок, потому что он близок к встроенному и имеет функции блочных элементов.

Во-вторых, вам нужно дать отступы справа и слева больше, чем сверху и снизу, потому что сами цифры простираются сверху вниз, поэтому они получают разумную высоту, НО, поскольку мы хотим сделать диапазон КРУГЛЫМ, поэтому мы даем им отступы больше слева и справа, чтобы освободить место для РАДИУСА ГРАНИЦЫ.

В-третьих, вы устанавливаете border-radius, который должен быть больше, чем PADDING + ширина самого содержимого, поэтому около 27 пикселей вы получите необходимую округлость, но для безопасного покрытия всех цифр вы можете установить его на более высокое значение.

Практический пример.

Сокращенное свойство border-radius может использоваться для одновременного определения всех четырех углов. Свойство принимает один или два набора значений, каждый из которых состоит из одной-четырех длин или процентов.

Синтаксис:

[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

Примеры:

border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px;
border-radius: 5px;
border-radius: 5px 10px / 10px; 

Я в вашем случае

span {
    border-radius: 100px;
    background: #000;
    color : white;
    padding : 10px 15px;


}

Посмотрите эту демонстрацию http://jsfiddle.net/daWcc/

В дополнение к другим решениям, http://css3pie.com/ отлично справляется с ролью полифилла для старого Internet Explorer. версии

РЕДАКТИРОВАТЬ: не требуется с 2016 года