thinking stiff

Demo: http://jsfiddle.net/ThinkingStiff/X7dLh/

Looks good in webkit (and great on the iPhone), but needs work in -moz, -o, and -ms. Most likely an inner span for the number.

HTML:

<div class="badge">1</div>

CSS:

.badge {
background: radial-gradient( center -9px, circle closest-side, white 0, red 26px );
background: -moz-radial-gradient( center -9px, circle closest-side, white 0, red 26px );
background: -ms-radial-gradient( center -9px, circle closest-side, white 0, red 26px );
background: -o-radial-gradient( center -9px, circle closest-side, white 0, red 26px );
background: -webkit-radial-gradient( center -9px, circle closest-side, white 0, red 26px );
background-color: red;
border: 2px solid white;
border-radius: 12px; /* must be 1/2 of ( border-width*2 + width ) */
box-shadow: 1px 1px 1px black;
color: white;
font: bold 17px/15px Helvetica, Verdana, Tahoma;
height: 18px; /* height + padding-top must equal width */
padding-top: 2px; /* height + padding-top must equal width */
text-align: center;
width: 20px;
}