Blending the edges of a div with rounded corners
<p>I'm trying to get a smooth gradient on all edges of a div with rounded corners.</p>

<p><a href="https://jsfiddle.net/wrd2b1xr/" rel="nofollow">Here's a JSfiddle of what I have so far.</a></p>

<p>HTML:</p>

<pre><code>&lt;div id=container&gt;
  &lt;div id="test"&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>#container {
  padding-top:150px;
  height: 350px;
  background-color: black;
}

#test {
  width: 200px;
  height:200px;
  margin-left:auto;
  margin-right:auto;
  background-color: rgba(247, 250, 252, 0.8);
  box-shadow: 0 0 100px 100px rgba(247, 250, 252, 0.8);
  border-radius: 20px;
}
</code></pre>

<p>In Chrome (54.0.2840.71 m) it looks basically like what I want, but there are artifacts at the rounded corners (<a href="https://i.stack.imgur.com/OpA2C.png" rel="nofollow">here is an image of what it looks like for me, the color banding is just from the image compression</a>). In Firefox the color of the shadow and div don't match up exactly at the edge and the artifacts are still there, and in Edge the colors match but the artifacts are worse.</p>

<p>Is there some way to get rid of these artifacts, or a different (simple) method to get a similar effect? I don't care about older browsers and would be happy even if it only works in chrome.</p>