title: Transparent rounded button with gradient border
body: <p>Firstly, I have searched SO for similar questions and there are many but none which have the exact requirements below.</p>
  
  <p>I am trying to create the button below using pure css.</p>
  
  <p><a href="https://i.stack.imgur.com/Zo57I.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Zo57I.png" alt="enter image description here"></a></p>
  
  <p>It has the following requirements.</p>
  
  <ol>
  <li>It has a 1px border with a horizontal gradient.</li>
  <li>It must be transparent.</li>
  <li>It must have rounded corners</li>
  <li>It will have a cut-out of the border which is also transparent.</li>
  <li>It must be variable width and height</li>
  <li>It should work in all modern browsers (not IE)</li>
  </ol>
  
  <p>I have created a Code Sandbox which gets all of it right except the border-radius. I have used a polygon clip-path for the cut out and used border-image for the gradient which is why the border-radius doesn't work.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    font-family: sans-serif;
    background-color: #232837;
  }
  
  .button {
    cursor: pointer;
    display: inline-block;
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
    color: white;
    
    background-color: transparent;
  
    border: solid 1px;
    border-radius: 6px;
    border-image: linear-gradient(to left, #743ad5 0%, #d53a9d 100%);
    border-image-slice: 1;
  
    clip-path: polygon(0 0, 12px 0, 12px 1px, 24px 1px, 24px 0, 100% 0, 100% 100%, 0 100%);
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;div style="padding:40px;"&gt;
     &lt;a class="button"&gt;This is a button&lt;/a&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://codesandbox.io/s/kw9p9k5073" rel="nofollow noreferrer">https://codesandbox.io/s/kw9p9k5073</a></p>
  
  <p>I have managed to avoid using svgs so far as I don't really understand them well enough to implement a solution properly but if I have to go down that path I will.</p>
  
  <p>Any advice would be very much appreciated.</p>