How to style style ordered list numbers?

Today I would like to show how to add background-color, border-radius and color to ordered list. if you make your look at nice on your website so it easy way to to like below:

1. HTML

<ol>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>

1. CSS

<style>

    body {
  counter-reset: item;
 }

 ol {
  list-style: none;
 }

 li {
  counter-increment: item;
  margin-bottom: 5px;
 }

 li:before {

  margin-right: 10px;
  content: counter(item);
  background: lightblue;
  border-radius: 100%;
  color: white;
  width: 1.2em;
  text-align: center;
  display: inline-block;

 }

</style>

Working Demo