Card with linear-gradient border border radius problem

Question

So this is the default design in figma that has to be made This is the desired look

• A linear gradient border
• With 10px linear-gradient
• Semi-transparent background-color

This is what i was able to come up with sofar:

It is already pretty close... but the border radius is just not working

This is the HTML for the cards:

<div class="radius">
        <div class="card gradient-border-bg">
          <img src="./img/card-icon-2.svg" alt="Developer Friendly" />
          <h2>Developer Friendly</h2>
          <p>
            Full control by our CLI called siloctl. Manage your connections in
            YAML files.
          </p>
        </div>
      </div>

Now this is the CSS for them:

.radius {
    border-radius: 10px;
    position: relative;
    width: 100%;
  }


  .gradient-border-bg {
    border: 5px solid;
    border-radius: 10px;
    border-image: linear-gradient(to bottom,#00D9D0 , #0081FF) 1;
    padding: 11rem 3rem 0 3rem;
    background: rgba(0,129,255,11%);
    height: 35rem;
    width: 100%;
    text-align: center;
    line-height: 172%;
  }

  .gradient-border-bg::after{
      background-color: rgba(0,129,255,.247);
      border-radius: 50%;
      bottom: 50%;
      box-shadow: 0 0 20rem 4rem#0081ff;
      content: "";
      display: block;
      height: 10px;
      left: 50%;
      position: absolute;
      right: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      width: 0;
      z-index: -1;
  }

If i disable the border property it looks like this:

So the card below gets the border radius 10px actually...

Here is the live dev site: https://icy-moss-0d8d9d403.4.azurestaticapps.net/