How to create rounded corners if the element have border-image?

Question

I created a card, it has some text and I used the border-image property to give it a gradient border on the left side. I also want it to have rounded corners so I used the border-radius property for that but the border-radius property doesn't work on the side where the gradient border is. I looked up online and there were some solutions, I tried it but it didn't work out.
This is the HTML

<div>
  <p>text</p>
  <span>more-text</span>
</div>

This is the CSS

div {
  box-shadow: 4px 4px 2px 2px #f7f7f7;
  width: 200px;
  height: 80px;
  padding: 12px;
  margin-left: 96px;
  border-width: 0 0 0 10px;
  border-style: solid;
  border-image: linear-gradient(
      169.92deg,
      #016daf 21.23%,
      rgba(1, 109, 175, 0.848958) 35.05%,
      #04b3f6 112.75%
    )
    1;
  border-radius: 4px;
}

Reference code on CodePen