<ol class="olCircled">
<li><span>1</span>list</li>
<li><span>2</span>list</li>
<li><span>3</span>list</li>
</ol>
<ol class="olRounded">
<li><span>1</span>list</li>
<li><span>2</span>list</li>
<li><span>3</span>list</li>
</ol>
<ol class="olSquared">
<li><span>1</span>list</li>
<li><span>2</span>list</li>
<li><span>3</span>list</li>
</ol>
ol li {
font-size:1.5em ;
line-height: 1.1em ;
}
ol li span{
margin: 0 0.5em 0 0 ;
text-align:center ;
width: 1.4em ;
display:inline-block ;
font-family: Trebuchet MS ;
font-size: 0.6em ;
letter-spacing:-0.1em ;
font-weight: bold ;
padding: 0.05em 0.1em 0 0 ;
line-height: 1.4em ;
position: relative ;
top: -0.2em ;
}
.olCircled li span{
border:2px #333 solid ;
color: #333 ;
border-radius: 0.9em ;
background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 121, color-stop(0.90, #a29696), color-stop(0.78, #a69b9b), color-stop(0.56, #f6f1e9));
background: -webkit-radial-gradient(50% 50%, circle, #f6f1e9 56%, #a69b9b 78%, #a29696 90%);
background: -moz-radial-gradient(50% 50%, circle, #f6f1e9 56%, #a69b9b 78%, #a29696 90%);
background: -o-radial-gradient(50% 50%, circle, #f6f1e9 56%, #a69b9b 78%, #a29696 90%);
background: -ms-radial-gradient(50% 50%, circle, #f6f1e9 56%, #a69b9b 78%, #a29696 90%);
background: radial-gradient(50% 50%, circle, #f6f1e9 56%, #a69b9b 78%, #a29696 90%);
}
.olRounded li span{
border:2px #333 solid ;
color: #333 ;
border-radius: 0.3em ;
}
.olSquared li span{
border:3px #333 double ;
color: #333 ;
}