11

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;
}
1
  • I think you need to have the same padding on all sides for this to work. Might want to also try reducing your line-height. This will probably also only work for single-digit numbers. Extra digits will increase the necessary width, but the height will remain the same.
    – Travesty3
    Feb 12, 2014 at 2:04

6 Answers 6

13

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>

0
4

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);
    }
1

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

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

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.

0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.