Edit in JSFiddle

.badge {
    background:             radial-gradient( 5px -9px, circle, white 8%, red 26px );
        background:    -moz-radial-gradient( 5px -9px, circle, white 8%, red 26px );
        background:     -ms-radial-gradient( 5px -9px, circle, white 8%, red 26px );
        background:      -o-radial-gradient( 5px -9px, circle, white 8%, red 26px );
        background: -webkit-radial-gradient( 5px -9px, circle, white 8%, red 26px );
    background-color: red;
    border: 2px solid white;
    border-radius: 12px; /* one half of ( (border * 2) + height + padding ) */
    box-shadow: 1px 1px 1px black;
    color: white;
    display: table;
    font: bold 15px/13px Helvetica, Verdana, Tahoma;
    height: 20px; 
    min-width: 8px;
    padding: 0 6px;
}

.badge::before {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

#one::before {
    content: "1";
}

#two::before {
    content: "2";
}

#three::before {
    content: "33";
}

#four::before {
    content: "44";
}
#five::before {
    content: "555";
}

#six::before {
    content: "666";
}

#seven::before {
    content: "7777";
}

#eight::before {
    content: "8888";
}

#nine::before {
    content: "999999";
}

/* only needed for this sample */
.badge {
    float: left;
    left: 25px;
    margin: 6px;
    position: relative;
    top: 25px; 
}