How to make a circle around content using CSS?

Question

Like this

With only this code

1
         


        

Answer 1

The border-radius shorthand property can be used to define all four corners simultaneously. The property accepts either one or two sets of values, each consisting of one to four lengths or percentages.

The Syntax:

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

Examples:

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

I your case

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


}

Check this Demo http://jsfiddle.net/daWcc/