<div class="btn btn1">100vmax</div>
<div class="btn btn2">calc(infinity * 1px)</div>

<input type="range" min="10" value="48" max="128" oninput="body.style.fontSize = this.value + 'px'" style="position:fixed;bottom:10%">

body {
  background: #2e2e2e;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column wrap;
  gap: 60px;
  font-size: 3em;
  accent-color: #845ec2;
}

.btn {
  width: fit-content;
  padding: 20px 40px;
  color: #eee;
  background: var(--color, #fff);
  &.btn1 {
    --color: #a82f83;
    border-radius: 100vmax;
  }
  &.btn2 {
    --color: #2e9b79;
    border-radius: calc(infinity * 1px);
  }
}