[CSS] Need help in adding a gradient border with curved corners and transparent fill

Questions
1

I’ve been stuggling to give a custom border style to my Group element. I’m looking for

  1. A gradient border
  2. Curved corners
  3. Transparent fill

Ideally it should look like below
image

I’ve managed to get Gradient border and transparent fill with below code but its not giving curved borders

<style>
#gradient-border-2 {
border-radius: 10px !important;
border: 3px solid;
border-image: linear-gradient(to right, #FC8450, #A23CF8) 1;
background-color: transparent;
}
</style>

In the inspect element tab, I see border radius being over-ridden by something

image

Can anyone help with this issue? Thanks a ton!

2

Bump - were you able to find out a solution?

3

@rayan1 Yes this code did the job for me

#gradient-border-1:before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  padding: 1px;
  border-radius: 10px;
  background: linear-gradient(to right, #FC8450 0, #FEF6FD 44%, #A23CF8 100%);
  -webkit-mask: 
     linear-gradient(#fff 0 0) content-box, 
     linear-gradient(#fff 0 0);
          mask: 
     linear-gradient(#fff 0 0) content-box, 
     linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}