如何使用 CSS 制作此按钮的边框样式？

Question

How can I make a button's border look like the image below using CSS? Here's what I've tried - https://jsfiddle.net/rx9sLtjp/10/

This is what I'm trying to achieve:

 body{ background: #070707; }.button-style { position: relative; margin: 30px; display: inline-block; padding: 0 20px; height: 40px; line-height: 40px; color: #fff; border: 0; outline: 0; border-radius: 6px; background: #070707 linear-gradient(90deg, rgba(117, 42, 135, 0.5) 0%, rgba(36, 18, 124, 0.5) 100%); &::after { content: ''; position: absolute; display: block; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; margin: -1px; border-radius: inherit; background: linear-gradient(90deg, #b415a2 0%, #3116ac 100%); } }

 <button class="header__registration button-style">registration</button>

Answer 1

Here is an idea combining clip-path and mask:

 .box { display:inline-block; font-size: 40px; padding: 30px 50px; position: relative; clip-path:polygon(0 0,100% 0,100% calc(50% - 18px),calc(100% - 18px) 50%,100% calc(50% + 18px),100% 100%,0 100%,0 calc(50% + 18px),18px 50%,0 calc(50% - 18px)); }.box:before { content:""; position:absolute; inset:0; padding: 4px; border-radius: 20px; background: linear-gradient(90deg, #b415a2, #3116ac); -webkit-mask: conic-gradient(from 45deg at calc(100% - 20px) 50%,#000 90deg,#0000 0) content-box, conic-gradient(from -135deg at 20px 50%,#000 90deg,#0000 0) content-box, linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: add,add,exclude; }

 <div class="box"> some text </div>