cannot set radius of gradient border

Question

I have defined the following styles:

export const GlassBackground = {
    background: 'linear-gradient(271.93deg, rgba(255, 255, 255, 0.6) 0.89%, rgba(255, 255, 255, 0.1) 100%)',
    WebkitBackdropFilter: 'blur(10px)',
    backdropFilter: 'blur(10px)',
    WebkitBoxShadow: '20px 20px 22px rgba(0,0,0,0.2)'
}

export const GlassInfoBox = {
    ...GlassBackground,
    boxShadow: '20px 20px 22px rgba(0,0,0,0.2)',
    borderRadius: '24px',
    backgroundClip: 'content-box, border-box',
    border: '2px solid',
    borderImageSlice: 1,
    borderImageSource: 'linear-gradient(271.98deg, rgba(255, 255, 255, 0.8) -0.5%, rgba(40, 36, 95, 0.06) 50.15%, rgba(255, 255, 255, 0.22) 97.73%)'
}

and used it like this:

<Card style={GlassInfoBox}>
        <CardContent>
            <Grid container>
                <Grid item xs={12} textAlign='center'><img src={imgSource} alt={altText} /></Grid>
                <Grid item xs={12}>
                    <Grid container>
                        <Grid item xs={12} textAlign='center'>
                            <span style={{ fontFamily: 'Poppins', color: Colors.main, fontWeight: 500, fontSize: '18px', lineHeight: '27px' }}>{title}</span>
                        </Grid>
                        <Grid item xs={12} textAlign='center'>
                            <span style={{ fontFamily: 'Poppins', color: Colors.main, fontWeight: 400, fontSize: '16px', lineHeight: '32px' }}>{text}</span>
                        </Grid>
                    </Grid>
                </Grid>
            </Grid>
        </CardContent>
    </Card>

but get the following result:

What I want to achieve is to set the gradient border the same radius as the card