Box-shadow not replicating perfect circle-CodePudding

I'm using the box shadow property to replicate the original circle multiple times, with different spread each shadow, see:

.a {
    width: 50px;
    height: 50px;
    background: #EEB850;
    border-radius: 50%;
    position: relative;
    top: 117;
    left: 167;
    box-shadow: 0 0 0 50px #243D83,
        0 0 0 100px #6592CF;
}

However, the shadows are not replicating the circle, but instead, they look like squares with rounded corners. Any suggestion about this? Screenshot of the result.

CodePudding user response：

While there is the bug in Edge/Chrome a workaround might be to create the circles with radial-gradients on a larger before pseudo element.

Here's a simple example:

.a {
  width: 50px;
  height: 50px;
  background: #EEB850;
  border-radius: 50%;
  position: relative;
  top: 117px;
  left: 167px;
}

.a::before {
  content: '';
  position: absolute;
  display: inline-block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400%;
  height: 400%;
  border-radius: 50%;
  background-image: radial-gradient(#EEB850 0 25px, #243D83 25px 50px, #6592CF 50px 75px, transparent 75px 100%);
  background-position: top left;
}

<div ></div>

Note: because one can sometimes get ragged effects with radial gradient the snippet has put the central color as its first circle to avoid edge effects (small gaps between the element and the radial gradient).