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

Question

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

I'm using a linear-gradient as border-imagem in an element, but that way the edge doesn't respect the border-radius I put in and doesn't perform the curvature at the vertices.

I would like it to look like this:

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 working properly, but the border-imagem does not respect this border-radius and continues without performing curvature at the vertices.

How can I fix this? (without being 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>

1

css css3 css-border css-border-radius

Author: hugocsl, 2019-01-02

Source

1 answers

score 2 · Accepted Answer

Hello, All right?

Please try the following approach:

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

I simplified editing the answer, used border with double to double the thickness and transparent to inhibit the default color. In this way we use via background-image the new colors, and the linear-gradient contemplates the internal filling of the and the radial-gradient (it can be here also linear, as you prefer)is responsible for the color of the border, Background-origin with border-box defines the area of placement of the background. O 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 edge (but below the edge in the-z ordering). I hope I 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>