title: CSS - How to create a rounded gradient border with gradient background
body: <p>I have a card that has a gradient as a background and <code>border-radius</code>, i wanna add a gradient border that respects that border radius. Things i've tried:</p>
  <ul>
  <li><code>border-image</code> --&gt; It didn't implement <code>border-radius</code></li>
  <li><code>background-clip</code> set to border-box and padding-box --&gt; It only works when the card has a background of solid color</li>
  </ul>
  <hr />
  <pre><code>.selector {
    width: 31rem;
    height: 35rem;
    border-radius: 2.1875rem;
    border: 0.88px solid transparent;
  
  /* Method One */
    border-image:  linear-gradient(
          -28.96deg,
          #fb37ff 0%,
          rgba(155, 111, 238, 0) 25.98%,
          rgba(123, 127, 234, 0) 60.91%,
          #1bb2de 100%
        ) 20;
  
  /* Method Two */
    background: var(--gradient-2) padding-box,
      linear-gradient(
          -28.96deg,
          #fb37ff 0%,
          rgba(155, 111, 238, 0) 25.98%,
          rgba(123, 127, 234, 0) 60.91%,
          #1bb2de 100%
        )
        border-box;
  
  }
  </code></pre>