Estou usando uma linear-gradient
como border-imagem
em um elemento, mas dessa forma a borda não respeita o border-radius
que coloquei e não realiza a curvatura nos vértices.
Eu gostaria que ficasse assim:
Aqui está o código referente a imagem acima. Deixei o box-shadow
para vcs verem que o elemento .box
está com o border-radius
funcionando corretamente, mas o border-imagem
não respeita esse border-radius
e continua sem realizar curvatura nos vértices.
Como posso corrigir isso? (sem ser com 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>