Why does a border that has opacity make a square inside a circle when I use radial-gradient(circle at)?

Question

When I have a circle in css with background: radial-gradient(circle at 75px 50px, #5cabff, #003) and add a border that has an opacity, it makes the circle look like it has a square inside it. Why is this happening and is there a solution for this to not happen?

.style {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 27px solid #00000030;
  background: radial-gradient(circle at 75px 50px, #5cabff, #003);
}

<div class="style"></div>

I expected when adding the border with opacity to not have in the circle a square shape, but a 3d sphere with a border.

Answer 1

You need to adjust the background-origin to make it border-box so that the gradient consider the border as its area too. By default background-origin is set to padding-box whereas background-clip is set to border-box making the background to repeat on the border creating the strange effect:

I also added the 27px of the border to the center of the circle since now the border is considered in the calculation.

.style {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 27px solid #00000030;
  background: radial-gradient(circle at 102px 77px, #5cabff, #003) border-box;
}

<div class="style"></div>

Related to get more details about the background-origin issue: Why doesn't this radial-gradient complete the circle?