border-radius not working using border-image implemented as a gradient?

Question

css

Greetings!
Why doesn't border-radius actually work using border-image ?
Help, how can I implement? I am sure that it is possible to implement it differently, but I do not know how. And the method that I have described seems to be supported only from version 11 of IE.
Everything will work fine without the gradient, but it's not clear with it...
Here is the template: https://jsbin.com/cetihu/edit?html ,css,output

Answer 1

You can do something like this: jsfiddle.net/osw11t96/100