How to maintain border-radius when animating element size?

I want carousel indicators animation to be like the list item pops out to zero radius.
However, in my attempt, the list item animates in a square shape rather than in a circular shape. Is it possible to get in a circular shape?

$('li').click(function(sender) {
  $('.active').removeClass('active');
  $(this).addClass('active');
})

.carousel-indicators li {
  width: 12px;
  border-radius: 12px;
  border-color: #2E8B57 !important;
  height: 24px;
  border-width: 1pt;
  margin: 1px 3px 1px 3px;
  padding: 1px;
  transition: opacity 0.6s ease, background-size 1s ease;
  background-image: linear-gradient(#2E8B57, #2E8B57);
  background-position: center;
  background-size: 0% 0%;
  background-repeat: no-repeat;
}

.carousel-indicators li.active {
  //background-color: #2E8B57;
  border-radius: 12px;
  background-image: linear-gradient(#2E8B57, #2E8B57);
  background-size: 100% 100%;
  background-clip: content-box, padding-box;
  padding: 1px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="icon" type="image/x-icon" href="../../assets/images/favicon.ico">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<ol class="carousel-indicators">
  <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
  <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
  <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>

Solution

I have managed to overcome this using radial-gradient from here

$('li').click(function(sender) {
  $('.active').removeClass('active');
  $(this).addClass('active');
})

.carousel-indicators li {
  width: 12px;
  border-radius: 12px;
  border-color: #2E8B57 !important;
  height: 24px;
  border-width: 1pt;
  margin: 1px 3px 1px 3px;
  padding: 1px;
  transition: opacity 0.6s ease, background-size 1s ease;
  background-image: radial-gradient(circle, #2E8B57 50%, transparent 51%);
  background-position: center;
  background-size: 0% 0%;
  background-repeat: no-repeat;
}

.carousel-indicators li.active {
  //background-color: #2E8B57;
  border-radius: 12px;
  background-image: radial-gradient(circle, #2E8B57 50%, transparent 91%);
  background-size: 100% 100%;
  background-clip: content-box, padding-box;
  padding: 1px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="icon" type="image/x-icon" href="../../assets/images/favicon.ico">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<ol class="carousel-indicators">
  <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
  <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
  <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>