2023 - Single element, no pseudo-elements, no SVG, no masks.

I can't be responsible for this, I saw it on a website (I forgot the name of the website and can't find it).

• It's just a regular button with rounded corners and a gradient background
• It uses ainsetbox-shadowto fill the inner white
• It has a 2px border and is actually transparent, so the edges of the button show through

body { background: aliceblue; } .gradient-border { border-radius: 24px; padding: 6px 12px; background-image: linear-gradient(90deg, red 0%, blue 100%); /* 填充内部白色 */ background-origin: border-box; box-shadow: inset 0 1000px white; /* 透明边框，所以按钮的边缘可以透过来显示 */ border: 2px solid transparent; }

Hello

2021: If you want transparency, I recommend using the CSS mask method as the support is pretty good now

You cannot useborder-radiusin gradients. Here's another idea, you can rely on multiple backgrounds and adjustbackground-clip:

.white-grad { background: linear-gradient(#ccc 0 0) 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; }

 这里放置一些文字
 
 这里放置一些很长很长的文字
 
 这里放置一些很长很长的文字
这里放置一些很长的文字