<input type="radio" name="e">
<input type="radio" name="e" style="--s:60px;--c:#337ab7;">
<input type="radio" name="e" style="--s:80px;--c:#5bc0de;">

<input type="radio" name="e" class="round">
<input type="radio" name="e" class="round" style="--s:60px;--c:#337ab7;">
<input type="radio" name="e" class="round" style="--s:80px;--c:#5bc0de;">

input {
  --s: 40px;
  --c: green;
  
  width: var(--s);
  aspect-ratio: 1;
  border: calc(var(--s)/8) solid grey;
  outline: calc(var(--s)/8) solid var(--_c,#0000);
  outline-offset: calc(var(--s)/4);
  padding: calc(var(--s)/8);
  background: linear-gradient(var(--c) 0 0) 50%/0 0 no-repeat content-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  transition:.3s;
}
input:checked {
  --_c: var(--c);
  background-size: 100% 100%;
  outline-offset: calc(var(--s)/-8);
  border-color: #0000
}
input:focus-visible {
  outline-color: #000;
  outline-offset: 5px;
  border-color: var(--c);
}

.round {
  border-radius:50%;
  background: radial-gradient(farthest-side,var(--c) 96%,#0000 ) 50%/0 0 no-repeat content-box;
}

body {
  background: pink;
  display: grid;
  height: 100vh;
  margin:0;
  grid-auto-flow :column;
  place-content: center;
  align-items:center;
  gap: 40px;
}