You cannot use
border-radiuswith gradient. Here is another idea where you
can rely on multiple background and adjust the
background-clip:
.white-grad { background: linear-gradient(#ccc,#ccc) padding-box, linear-gradient(to right, #9c20aa, #fb3570) border-box; color: #313149; padding:10px; border: 5px solid transparent; border-radius:15px; display:inline-block; margin: 75px 0;}<div > Some text here</div><div > Some long long long text here</div><div > Some long long <br>long text here</div>如果需要透明性，可以考虑使用SVG，如下所示：
svg { width:200px; height:100px; margin:10px;}<svg xmlns="http://www.w3.org/2000/svg"><defs> <linearGradient id="Gradient" x1="0" x2="100" y1="0" y2="0" gradientUnits="userSpaceOnUse"> <stop stop-color="#9c20aa" offset="0"/> <stop stop-color="#fb3570" offset="1"/> </linearGradient> </defs> <rect x="5" y="5" height="100%" width="100%" rx="20" ry="20" stroke-width="10" fill="transparent" stroke="url(#Gradient)"/></svg>That you can apply as background:
.white-grad { background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" ><defs><linearGradient id="Gradient" x1="0" x2="100" y1="0" y2="0" gradientUnits="userSpaceOnUse"><stop stop-color="%239c20aa" offset="0"/><stop stop-color="%23fb3570" offset="1"/></linearGradient></defs><rect x="5" y="5" width="100%" height="100%" rx="20" ry="20" stroke-width="10" fill="transparent" stroke="url(%23Gradient)"/></svg>'); color: #313149; padding:25px; border-radius:15px; display:inline-block; margin: 75px 0;}body { background:yellow;}<div > Some text here</div><div > text very loooooooooooong here</div>You can also use it as common element and consider
position:absoluteto
place it around the text:
.white-grad { color: #313149; padding: 25px; border-radius: 15px; display: inline-block; margin: 75px 0; position:relative; z-index:0;}.white-grad > svg { position:absolute; top:0; left:0; height:100%; width:100%; z-index:-1;}body { background: yellow;}.hide { height:0; width:0;}<svg xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="Gradient" x1="0" x2="100" y1="0" y2="0" gradientUnits="userSpaceOnUse"><stop stop-color="#9c20aa" offset="0"/><stop stop-color="#fb3570" offset="1"/></linearGradient></defs><rect x="5" y="5" width="100%" height="100%" id="border" rx="20" ry="20" stroke-width="10" fill="transparent" stroke="url(#Gradient)"/></svg><div ><svg xmlns="http://www.w3.org/2000/svg"> <use href="#border" /></svg>Some text here</div><div ><svg xmlns="http://www.w3.org/2000/svg"> <use href="#border" /></svg>text very loooooooooooong here</div>Here is a different and complex idea with CSS using
maskwhere you will have
transparency and it will also be responsive:
.white-grad { color: #313149; padding: 10px; 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: 5px solid transparent; border-radius: 15px; background: linear-gradient(to right, #9c20aa, #fb3570) border-box; -webkit-mask: radial-gradient(farthest-side at bottom left ,transparent calc(100% - 5px),#fff calc(100% - 4px) 100%) top right/15px 15px, radial-gradient(farthest-side at top right ,transparent calc(100% - 5px),#fff calc(100% - 4px) 100%) bottom left /15px 15px, radial-gradient(farthest-side at top left ,transparent calc(100% - 5px),#fff calc(100% - 4px) 100%) bottom right/15px 15px, radial-gradient(farthest-side at bottom right,transparent calc(100% - 5px),#fff calc(100% - 4px) 100%) top left /15px 15px, linear-gradient(#fff,#fff) top /100% 5px, linear-gradient(#fff,#fff) bottom/100% 5px, linear-gradient(#fff,#fff) left /5px 100%, linear-gradient(#fff,#fff) right /5px 100%; -webkit-mask-repeat:no-repeat; mask: radial-gradient(farthest-side at bottom left ,transparent calc(100% - 5px),#fff calc(100% - 4px) 100%) top right/15px 15px, radial-gradient(farthest-side at top right ,transparent calc(100% - 5px),#fff calc(100% - 4px) 100%) bottom left /15px 15px, radial-gradient(farthest-side at top left ,transparent calc(100% - 5px),#fff calc(100% - 4px) 100%) bottom right/15px 15px, radial-gradient(farthest-side at bottom right,transparent calc(100% - 5px),#fff calc(100% - 4px) 100%) top left /15px 15px, linear-gradient(#fff,#fff) top /100% 5px, linear-gradient(#fff,#fff) bottom/100% 5px, linear-gradient(#fff,#fff) left /5px 100%, linear-gradient(#fff,#fff) right /5px 100%; mask-repeat:no-repeat;}<div > Some text here</div><div > Some long long long text here</div><div > Some long long <br>long text here</div>With CSS variables, we can make it easy to adjust:
.white-grad { --b:5px; --r:15px; --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 > Some text here</div><div > Some long long long text here</div><div > Some long long <br>long text here</div><div > Some long long <br>long text here<br> more and more more and more</div>
