CSS round div fill-in on hover - css

Question

I tried to make a little effect while hovering a round div, but I couldn't find how actually to make the fill in in a round shape too.
As you can see the fill in is in a square shape, and I would like to have it in the shape of my div (round in this case)
Is there a solution to that in CSS?
.circle {
height: 50px;
width: 50px;
margin: 35px;
border: 3px solid blue;
background-image: linear-gradient(blue, blue);
background-repeat: no-repeat;
transition: background-size .5s, color .5s;
background-size: 0 0;
background-position: 50% 50%;
border-radius: 30px;
}
.circle:hover {
background-size: 100% 100%;
color: blue;
}
<div class="circle"></div>

Answer 1

You can use radial-gradient or box-shadow
box-shadow
.circle {
height: 50px;
width: 50px;
margin: 35px;
border: 3px solid blue;
background: blue;
transition: box-shadow .5s, color .5s;
background-size: 0 0;
background-position: 50% 50%;
border-radius: 30px;
box-shadow: inset 0 0 0 50px white
}
.circle:hover {
box-shadow: inset 0 0 0 0px white;
color: blue;
}
<div class="circle">
</div>
radial-gradient
.circle {
height: 50px;
width: 50px;
margin: 35px;
border: 3px solid blue;
background-image: radial-gradient(circle at center , blue 50%, transparent 50%);
background-repeat: no-repeat;
transition: background-size .5s, color .5s;
background-size: 0 0;
background-position: 50% 50%;
border-radius: 30px;
}
.circle:hover {
background-size: 200% 200%;
color: blue;
}
<div class="circle">
</div>

Answer 2

You can fill the circle and set animations with a pseudo element.
.circle {
height: 50px;
width: 50px;
border: 3px solid blue;
border-radius: 50%;
margin: 35px;
position: relative;
}
.circle:before {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
content: "";
background: blue;
border-radius: 50%;
width: 0;
height: 0;
transition: all .5s;
}
.circle:hover:before {
width: 100%;
height: 100%;
}
<div class="circle"></div>