Gradient border-radius

.circle-border {
  box-sizing: border-box;
  border: 2px solid transparent;
  background-image: linear-gradient(white, white),
    radial-gradient(circle at top left, #f00, #3020ff);
  background-clip: content-box, border-box;
  border-radius: 100%;
}

Code Review

• background image doubling! (x2)
  - linear-gradient
  - radial-gradient

it shows white space but radial-gradient, because linear-gradient cover on the radial-gradient field.

• background-clip:
  - linear-gradient covers "content-box"
  
  - radial-gradient covers "border-box"
  

in this situation, "white" linear-gradient covers almost all radial-gradient background,
so if linear-gradient area(which is content-box area) is way much smaller than whole element area(border-box), it already shows border-like element.
However, usually it looks like a "Eclipse" shape! so for the control thickness, just add border option with transparent!
In normal situation, border generates outside the border-box, so it doesn't work. That's why we need box-sizing to border-box!
It will generates border inside border-box which means we can get transparent border line inside border-box. so transparent border shows background, which is radial-gradient covers!!