Circular background for a div content

i have a list ltems using flex box i need to get a circular highlight around the dynamic content which are numbers in this case shown by

{galleyCartsDet[0].quantity}

{galleyCartsDet[1].quantity} etc is there a css approach for this

<div className='galley-carts'>
        <div class='flexCol floatRight'>
            <ul>
              <span><b>Galley Details</b></span> <br/>
              <li className='floatRight'>{galleyCartsDet[0].quantity} Full Cart</li><br/>
              <li className='floatRight'>{galleyCartsDet[1].quantity} Half Cart</li><br/>
              <li className='floatRight'>{galleyCartsDet[2].quantity} SMU</li><br/>
              <li className='floatRight'>{galleyCartsDet[3].quantity} Stowage</li>
            </ul>
        </div>
     </div>

i have tried

.carts_circle{
      border-radius: 10px;
      width: 10px;
      height: 10px;
      background: yellow; 
  }

but doesn’t seems to work

<div className='galley-carts'>
        <div class='flexCol floatRight'>
            <ul>
              <span><b>Galley Details</b></span> <br/>
<li className='floatRight'><div classname="cart_circle">{galleyCartsDet[0].quantity}</div> Full Cart</li><br/>
              <li className='floatRight'><div classname="cart_circle">{galleyCartsDet[1].quantity}</div> Half Cart</li><br/>
              <li className='floatRight'><div classname="cart_circle">{galleyCartsDet[2].quantity}</div> SMU</li><br/>
              <li className='floatRight'><div classname="cart_circle">{galleyCartsDet[3].quantity}</div> Stowage</li>
            </ul>
        </div>
     </div>