CSS Show rounded labels.

Note : This is not image. it is Text. I want to show rounded label on the top right corner of Image.

Example :)

<style type="text/css">
 .box {
     position: relative;
     display: inline-block;
     top: 20px;
     margin-right: 20px;
 }

  .index {
     background: none repeat scroll 0 0 #0063ff;
     border: 2px solid #ffffff;
     border-radius: 25px;
     color: #fff;
     font-size: 28px;
     font-weight: bold;
     padding: 5px 15px;
     position: absolute;
     right: -10px;
     top: -10px;
 }
</style>

<div class="box">
    <img src="1.png" alt="image" />
    <span class="index">1</span>
</div>

<div class="box">
    <img src="1.png" alt="image" />
    <span class="index">2</span>
</div>

<div class="box">
    <img src="1.png" alt="image" />
    <span class="index">3</span>
</div>

Output :)