¿Cómo hacer un círculo alrededor del contenido usando CSS?

Me gusta esto

circule alrededor del contenido

Con solo este código

1 

    http://jsfiddle.net/MafjT/

    Puedes usar este 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; } 

    Como quiere un círculo, necesita establecer el mismo valor para ancho, alto y alto de línea (para centrar el texto verticalmente). También necesita usar la mitad de ese valor para el radio del borde.

    Esta solución siempre hace un círculo, independientemente de la longitud del contenido.


    Pero, si quieres una elipse que se expanda con el contenido, entonces http://jsfiddle.net/MafjT/256/


    Cambiar el tamaño con el contenido – Mejora

    En este https://jsfiddle.net/36m7796q/2/ puede ver cómo renderizar un círculo que reactjs a un cambio en la longitud del contenido.
    Incluso puede editar el contenido en el último círculo, para ver cómo cambia el diámetro.

    Usando 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/

    Tienes muchas respuestas ahora, pero bash decirte los conceptos básicos.

    El primer elemento es el elemento en línea, por lo que le damos un margen desde la parte superior, necesitamos convertirlo en un elemento de bloque. Convertí al bloque en línea porque está cerca de la línea y tiene características de elementos de bloque.

    En segundo lugar, necesitas dar relleno a la derecha e izquierda más arriba y abajo porque los números se extienden de arriba a abajo para que tenga una altura razonable PERO como queremos hacer el ciclo REDONDO, entonces les damos relleno más a la izquierda y derecha para hacer espacio para RADIO DE LA FRONTERA.

    En tercer lugar, estableces un radio de borde que debe ser más que ACOLCHADO + ancho del contenido, por lo que alrededor de 27px obtendrás la redondez requerida, pero para cubrir todos los números de forma segura puedes establecerlo en un valor mayor.

    Ejemplo práctico .

    La propiedad abreviada de radio de borde se puede usar para definir las cuatro esquinas simultáneamente. La propiedad acepta uno o dos conjuntos de valores, cada uno de los cuales consta de una a cuatro longitudes o porcentajes.

    La syntax

     [  |  ]{1,4} [ / [  |  ]{1,4} ]? 

    Ejemplos:

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

    Yo tu caso

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

    Verifique esta demostración http://jsfiddle.net/daWcc/

    Además de las otras soluciones, http://css3pie.com/ hace un gran trabajo como un polyfill para versiones antiguas de Internet Explorer

    EDITAR: no es necesario a partir de 2016