Edit in JSFiddle

$(function(){
    
var olCircled = $(".olCircled");

olCircled.find("li").each(function(count){
    $(this).prepend("<span>" + (++count) + "</span>");       
});
olCircled.find("li").css("list-style-type","none");
    olCircled.find("li span").css({
        "text-align":"center",
        "margin": "0 0.5em 0 0",
        "width": "1.5em",
        "display": "inline-block",
        "font-family": "Trebuchet MS",
        "font-size": "0.8em",
        "letter-spacing": "-0.1em",
        "font-weight": "bold",
        "padding": "0 0.1em 0 0",
        "line-height": "1.6em",
        "position": "relative",
        "top": "-0.1em",
        "border": "2px #333 solid",
        "color": "#333",
        "border-radius": "0.9em"
});
});

<ol class="olCircled">
    <li>list</li>
    <li>list</li>
    <li>list</li>
    <li>list</li>
    <li>list</li>
    <li>list</li>
    <li>list</li>
    <li>list</li>
    <li>list</li>
    <li>list</li>
    <li>list</li>
    <li>list</li>
    <li>list</li>
    <li>list</li>
    <li>list</li>
    <li>list</li>
    <li>list</li>
    <li>list</li>
    <li>list</li>
    <li>list</li>
    <li>list</li>
    <li>list</li>
    <li>list</li>
    <li>list</li>
    <li>list</li>
    <li>list</li>
    <li>list</li>
    <li>list</li>
    <li>list</li>
    <li>list</li>
</ol>

ol {
    margin: 10px ;
}

ol li {
    font-size:1em ;
    line-height: 1.6em ;
}