<div class="rounded-1">1. Hover me </div>
<div class="rounded-2">2. Hover me </div>
<div class="rounded-3">3. Hover me </div>
<div class="rounded-4">4. Hover me </div>
<div class="rounded-5">5. Hover me </div>
<div class="rounded-6">6. Hover me </div>
<div class="rounded-7">7. Hover me </div>
<div class="rounded-8">8. Hover me </div>

.rounded-1 {
  background: 
     radial-gradient(circle closest-side, currentColor 90%, transparent) 
    bottom /var(--d, 80%) 12px repeat-x;
  transition: 0.5s;
}
.rounded-1:hover {
  --d: 12px;
}

.rounded-2 {
  background: 
     radial-gradient(circle closest-side, currentColor 90%, transparent) 
     bottom /var(--d, 3px) 12px repeat-x;
  transition: 0.5s;
}
.rounded-2:hover {
  --d: 12px;
}

.rounded-3 {
  background: 
      radial-gradient(circle 7px, currentColor 90%, transparent) bottom var(--d, -14px) 
      left 50%/12px 14px repeat-x;
  transition: 0.5s;
}
.rounded-3:hover {
  --d: -7px;
}

.rounded-4 {
  background:
    radial-gradient(circle closest-side, currentColor 80%, transparent) bottom var(--p1, 0px) left 50% /100% var(--p, 12px) no-repeat,
    linear-gradient(currentColor 0 0) bottom 4px left 50%/var(--d, 0%) 3px no-repeat;
  transition: 0.5s;
}
.rounded-4:hover {
  --d: 100%;
  --p: 3px;
  --p1: 4px;
}

.rounded-5 {
  padding-bottom: 8px;
  background:
    radial-gradient(circle closest-side, currentColor 80%, transparent) bottom 0 left calc(50% - var(--d, 0px)/2) /100% 12px no-repeat,
    radial-gradient(circle closest-side, currentColor 80%, transparent) bottom 0 left calc(50% + var(--d, 0px)/2) /100% 12px no-repeat,
    linear-gradient(currentColor 0 0) bottom /var(--d, 0%) 12px no-repeat;
  transition: 0.5s;
}
.rounded-5:hover {
  --d: 50px;
}

.rounded-6 {
  padding-bottom: 8px;
  background:
    radial-gradient(circle closest-side, currentColor 80%, transparent) bottom /12px 12px no-repeat,
    radial-gradient(circle closest-side, currentColor 80%, transparent) bottom /12px 12px no-repeat,
    linear-gradient(currentColor 0 0) bottom left /var(--d, 0%) 12px no-repeat,
    linear-gradient(currentColor 0 0) bottom right/var(--d, 0%) 12px no-repeat;
  transition: 0.3s, background-position 0.3s 0.3s;
}
.rounded-6:hover {
  --d: 100%;
  background-position: bottom left, bottom right;
  transition: 0.3s, background-size 0.3s 0.3s;
}

.rounded-7 {
  padding-bottom: 8px;
  background:
    radial-gradient(circle closest-side, currentColor 80%, transparent) -12px 100% /12px 12px no-repeat,
    linear-gradient(currentColor 0 0) bottom left /var(--d, 0) 12px no-repeat;
  transition: 0.3s linear;
}
.rounded-7:hover {
  --d: 50%;
  background-position: 50% 100%, bottom left;
}

.rounded-8 {
  background:
    radial-gradient(circle closest-side, currentColor 80%, transparent) var(--d, 50%) 100% /12px 12px no-repeat;
}

.rounded-8:hover {
  --d: 50.1%;
  transition: 0.3s cubic-bezier(.5, -900, .5, 900);
}

/**/
div[class] {
  display:inline-block;
  font-size:40px;
  font-family:sans-serif;
  margin:25px;
  padding-bottom:10px;
  cursor:pointer;
}
div[class]:nth-child(odd) {
  color:darkblue;
}
body {
  text-align:center;
}