Why does my border-image not respect the border-Radius?

Question

I’m wearing a linear-gradient as border-imagem in an element, but thus the edge does not respect the border-radius that I placed and does not realize the curvature in the vertices.

I’d like it to stay that way:

But it’s getting like this:

Here is the code referring to the image above. I left the box-shadow for you to see that the element .box is with the border-radius functioning properly, but the border-imagem does not respect that border-radius and continues to perform no curvature at the vertices.

How can I fix this? (other than with SVG)

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
}

.box {
  position: relative;
  width: 400px;
  height: 160px;
  margin: auto;	
  border: 2px solid;
  border-image: linear-gradient(red, blue);
  border-image-slice: 1;
  border-radius: 20px;

  box-shadow: 0 0 0 1px green;
}

<div class="box"></div>

Answer 1

Hello, all right?

Try the following approach, please:

I had the same problem some time ago and formulated my solution based on this topic https://gist.github.com/stereokai/36dc0095b9d24ce93b045e2ddc60d7a0

I simplified the editing of the answer, we used the border with double to double the thickness and Transparent to inhibit the default color. This way we use the new colors via background-image, and the linear-gradient contemplates the internal filling of the and the radial-gradient (can be here also linear, as you prefer) is responsible for the border color, Background-origin with border-box defines the positioning area of the background. The Background-clip: content-box. , the background is drawn inside (cut) the content box, already border-box also applied here, the background extends to outside the border of the border (but below the edge in the z-sort). I hope I’ve helped.

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
}

.box {
  position: relative;
  width: 400px;
  height: 160px;
  margin: auto;	
  border: double 2px transparent;
  border-radius: 20px;
  background-image: linear-gradient(white, white), radial-gradient(circle at top left, red, blue);
  background-origin: border-box;
  background-clip: content-box, border-box;
}

<div class="box"></div>