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

check this out

.badge {
    display: inline-block;
    min-width: 10px;
    padding: 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 4

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%;
}

Answer 5

I had the same issue. When I added a 100% border-radius, my picture turned into an oval. That is because my picture is wider than it is tall. Imagine smoothing the edges of a rectangle. If you want your image to be circular, you have to make sure the height and width dimensions are the same. You could try setting them by doing the following:

css height: 200px; width: 200px; (so the point is having equal height and with in your CSS)

This will make sure that your image is circular, however, it may cause your image to stretch and become distorted because your originally image is NOT a perfect square I presume.

Answer 6

You can use vw unit for width and height. Like the sample below:

 div { background-color: green; width: 20vw; height: 20vw; border-radius: 100%; text-align: center; line-height: 20vw; color: white; }

 <div>resize device</div>