.white-grad {
--b:5px; /* border width*/
--r:15px; /* the radius */
--g:transparent calc(100% - var(--b)),#fff calc(100% - var(--b) + 1px) 100%;
color: #313149;
padding: calc(var(--b) + 5px);
display: inline-block;
margin: 75px 0;
position:relative;
z-index:0;
}
.white-grad:before {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
border: var(--b) solid transparent;
border-radius: var(--r);
background: var(--c,linear-gradient(to right, #9c20aa, #fb3570)) border-box;
-webkit-mask:
radial-gradient(farthest-side at bottom left ,var(--g)) top right/var(--r) var(--r),
radial-gradient(farthest-side at top right ,var(--g)) bottom left /var(--r) var(--r),
radial-gradient(farthest-side at top left ,var(--g)) bottom right/var(--r) var(--r),
radial-gradient(farthest-side at bottom right,var(--g)) top left /var(--r) var(--r),
linear-gradient(#fff,#fff) top /100% var(--b),
linear-gradient(#fff,#fff) bottom/100% var(--b),
linear-gradient(#fff,#fff) left /var(--b) 100%,
linear-gradient(#fff,#fff) right /var(--b) 100%;
-webkit-mask-repeat:no-repeat;
mask:
radial-gradient(farthest-side at bottom left ,var(--g)) top right/var(--r) var(--r),
radial-gradient(farthest-side at top right ,var(--g)) bottom left /var(--r) var(--r),
radial-gradient(farthest-side at top left ,var(--g)) bottom right/var(--r) var(--r),
radial-gradient(farthest-side at bottom right,var(--g)) top left /var(--r) var(--r),
linear-gradient(#fff,#fff) top /100% var(--b),
linear-gradient(#fff,#fff) bottom/100% var(--b),
linear-gradient(#fff,#fff) left /var(--b) 100%,
linear-gradient(#fff,#fff) right /var(--b) 100%;
mask-repeat:no-repeat;
}
body {
background:#f2f2f2;
}
<div class="white-grad"> Some text here</div>
<div class="white-grad" style="--r:20px;--b:10px;--c:linear-gradient(140deg,red,yellow,green)"> Some long long long text here</div>
<div class="white-grad" style="--r:30px;--b:8px;--c:linear-gradient(-40deg,black 50%,blue 0)"> Some long long <br>long text here</div>
<div class="white-grad" style="--r:40px;--b:20px;--c:conic-gradient(black,orange,purple)"> Some long long <br>long text here<br> more and more more and more</div>