So, I'm trying to fade out an image that has border-radius: 50% but I can't seem to get it down.
<section id="main">
<h1>Non-Important-Text</h1>
<h4>
it's all fun and games until you can't find a damn solution....
</h4>
<div id="img-container">
<img src="./assets/1.jpg" />
</div>
</section>
/* ... */
#main #img-container {
border-radius: 50%;
display: inline-block;
position: relative;
}
#main #img-container img {
width: 30em;
border-radius: 50%;
display: block;
border: 1px solid white;
}
#main #img-container img::after {
content: "";
display: block;
background: radial-gradient(
ellipse at center,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
); /* This doesn't work! */
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
My Image, is circle, and does have a border. But it doensn't get faded out( in a circular way). How can I achieve that
Goal: 
What I Get: 
I tried everything from, radial-gradient, -webkit-gradient, to even, -webkit-radial-gradient. But they all produce the same result!
