perfect circle in css with border-radius doesn't work

Question

the circle tend be oval, what I want is perfect circle. border-radius 100% isn't work I wonder why..

http://jsfiddle.net/8gD2m/1/

.badge {
    display: inline-block;
    min-width: 10px;
    padding: 3px 7px;
    font-size: 12px;
    font-weight: lighter !important;
    line-height: 1;
    color: #fff !important;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    background-color: #d73d33;
    border-radius: 50px;
    position: relative;
    top: -3px;
}

Answer 1

Here is a JSfiddle with some changes:

JSFiddle for round badge

The main changes are:

padding: 0px;
width: 50px;
height: 50px;
line-height: 50px;

Having a line-height equal to the container height will center the text vertically. This only works if the text fits on a single line.

Edit: (copied code from JSFiddle)

.badge {
    display: inline-block;
   
    padding: 0;
    width: 50px;
    height: 50px;    
    line-height: 50px;
    
    font-size: 12px;
    font-weight: lighter !important;
    color: #fff !important;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    background-color: #d73d33;
    border-radius:50px;
    position: relative;
    top: -3px;
}

<span class="badge badge-success">8</span>

Answer 2

if it's not perfect circle check display: inline-block and border-radius: 50%:

 .cirlce {
    height: 20px;
    width: 20px;
    padding: 5px;
    text-align: center; 
    border-radius: 50%;
    display: inline-block;
    color:#fff;
    font-size:1.1em;
    font-weight:600;
    background-color: rgba(0,0,0,0.1);
    border: 1px solid rgba(0,0,0,0.2);
    }

Answer 3

The main trick for making it a perfect circle is distributing the padding of the element(container) evenly => then setting border-radius: 50% or border-radius: 100%. So you can get rid of the height and width declaration and use absolute positioning and padding to control the height and width

or same height and width and uniform padding value

 .element-class {
    Position: absolute;
    padding: 10em or 10% or with any unit;
    border-radius: 50% or 100%;
  }

OR

.element-class {
 height: 10em;
 width: 10em;
 padding: 10em;   **
 border-radius: 50%;
}