the circle tend be oval, what I want is perfect circle. border-radius 100% isn't work I wonder why..
.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;
}
padding
on all sides for this to work. Might want to also try reducing yourline-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.