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!!