How to make a rounded border with a gradient?

Question

css

Hello everyone, I don’t know how to round the corners of the border

border: 5px solid;
  border-image: -moz-linear-gradient(to top, #000 10%, blue 50%)1% 1;
  border-image: -webkit-linear-gradient(to top, #000 10%, blue 50%)1% 1;
  border-image: linear-gradient(to top, #000 10%, blue 50%)1% 1;

With such a construction of the gradient, it is impossible to round, what should be done?

Answer 1

Unfortunately, it's not possible to round the border-image.
Alternatively, you can wrap the block with border-image in a div, and set the div to the desired rounding and overflow: hidden;