Radio button hover animation - css

Question

I'm trying to have a round border around my radio button fade in upon hover. The issue I'm facing is the hover border is being painted on the inside of the button as well as the outside. I'd only like the border on the outside. Additionally, the fade in transition is not working. Some advice appreciated. Thank you.
input[type='radio'] {
width: 20px;
height: 20px;
border: 2px solid #747474;
border-radius: 50%;
outline: none;
opacity: 0.6;
transition: 0.3s;
}
input[type='radio']:hover:before {
box-shadow: 0px 0px 0px 12px rgba(80, 80, 200, 0.2);
border-radius: 50%;
opacity: 1;
}
input[type='radio']:before {
content: '';
display: block;
width: 60%;
height: 60%;
margin: 20% auto;
border-radius: 50%;
}
input[type='radio']:checked:before {
background: green;
}
<input type="radio">

Answer 1

You can check this code snippet with some explanation
input[type='radio'] {
width: 20px;
height: 20px;
border: 2px solid #747474;
border-radius: 50%;
outline: none;
opacity: 0.6;
/*transition: 0.3s;*/
}
input[type='radio']:hover:before {
box-shadow: 0px 0px 0px 12px rgba(80, 80, 200, 0.2);
border-radius: 50%;
opacity: 1;
}
input[type='radio']:before {
content: '';
display: block;
width: 60%;
height: 60%;
margin: 10%; /* Keeping margin only 10% */
padding: 10%; /* Increase the inner area for pushing the border out of the circle */
border-radius: 50%;
transition: 0.3s; /* Move your transition to here */
}
input[type='radio']:checked:before {
background: green;
}
<input type="radio">

Answer 2

Transition in before
input[type='radio'] {
width: 20px;
height: 20px;
border: 2px solid #747474;
border-radius: 50%;
outline: none;
opacity: 0.6;
}
input[type='radio']:hover:before {
box-shadow: 0px 0px 0px 12px rgba(80, 80, 200, 0.2);
border-radius: 50%;
opacity: 1;
}
input[type='radio']:before {
content: '';
display: block;
width: 60%;
height: 60%;
margin: 20% auto;
border-radius: 50%;
transition: 0.3s;
}
input[type='radio']:checked:before {
background: green;
}
<input type="radio">

Answer 3

I find it a bit hacky solution,
it might help.
input[type='radio'] {
width: 20px;
height: 20px;
border: 2px solid #747474;
border-radius: 50%;
outline: none;
opacity: 0.6;
transition: 0.3s;
}
input[type='radio']:hover:before {
box-shadow: 0px 0px 0px 12px rgba(80, 80, 200, 0.2);
border-radius: 50%;
opacity: 1;
}
input[type='radio']:before {
content: '';
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
}
input[type='radio']:checked:before {
background: green;
}
<input type="radio">

Answer 4

added animation and also the hover border is now outside only
input[type='radio'] {
/* add margin here of If you want */
width: 20px;
height: 20px;
border: 2px solid #747474;
border-radius: 50%;
outline: none;
opacity: 0.6;
transition: 0.3s;
}
input[type='radio']:hover:before {
box-shadow: 0px 0px 0px 12px rgba(80, 80, 200, 0.2); /* control thickens on border here */
border-radius: 50%;
opacity: 1;
}
input[type='radio']:before {
content: '';
display: block;
width: 100%; /* outside border*/
height: 100%; /* for outside border */
border-radius: 50%;
transition:.3s; /* for animation*/
}
input[type='radio']:checked:before {
background: green;
}
<input type="radio">