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