<fieldset>
  <legend>Choose a flavor: </legend>

  <div>
    <input type="radio" id="vanilla" name="flavor" value="vanilla">
    <label for="vanilla">Vanilla 🍨</label>
  </div>

  <div>
    <input type="radio" id="chocolate" name="flavor" value="chocolate">
    <label for="chocolate">Chocolate 🍫</label>
  </div>

  <div>
    <input type="radio" id="strawberry" name="flavor" value="strawberry">
    <label for="strawberry">Strawberry 🍓</label>
  </div>
</fieldset>

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  font-family: sans-serif;
  font-size: 1.8rem;
  background-image: linear-gradient(
    to bottom right,
    #5dade2,
    #7fb3d5,
    #a2a3c3,
    #c67d8f,
    #f4d03f
  );
}

fieldset {
  margin: 50px;
  padding: 20px;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  display: inline-block;
  border: none;
}

legend {
  font-size: 28px;
  font-weight: bold;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(2px);
  border-radius: 20px;
  padding: 10px 20px;
  color: white;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 1px solid #fff;
  border-radius: 50%;
  margin-right: 10px;
  background-color: transparent;
  position: relative;
  top: 6px;
}

input[type="radio"]:checked::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  background-color: #ca8489;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: appear 0.8s;
}

label {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
}

div {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

@keyframes appear {
  0% {
    transform: translate(-50%, -50%) scale(0);
    background-color: #fff;
  }
  45% {
    transform: translate(-50%, -50%) scale(1.6);
    background-color: #64aedf;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.7);
    background-color: #ad97b3;
  }
  55% {
    transform: translate(-50%, -50%) scale(1.6);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    background-color: #ca8489;
  }
}

// Have a wonderful day!