border-radius is not working.

[Krepppa352]

In my style.css, I have this for a custom hardware info element:

#custom-hardware {
    border-style: solid;
    border-width: 2px;
    border-image: linear-gradient(to bottom right, rgba(51, 204, 255, 238), rgba(00, 255, 153, 238)) 1;
    border-radius: 12px;
}

Though the border-radius property has no effect.

I am on CachyOS (arch based) and using Hyprland for the Desktop Environment. If you need any additional info, let me know!

[msmafra]

I can confirm that it does round the edges. In my main configuration I use border-radius and works fine, adding border-image with linear gradient breaks it. But, testing it on W3C Schools site it seems that CSS itself doesn't accept rounding for the border images.
https://www.w3schools.com/cssref/tryit.php?filename=trycss3_border-image

#custom-hardware {
    border: 0.5rem solid transparent;
    border-image: linear-gradient(to bottom right, rgba(51, 204, 255, 238), rgba(00, 255, 153, 238)) 10%;
    border-radius: 20px;
}

[Krepppa352]

@msmafra yeah, apparently border-image overrides/ignores border-radius. So for now, I just won't use border gradients. There seem to be workarounds, but right now I'm too lazy to figure them out.

[msmafra]

@Krepppa352 Maybe using background gradients, really not sure if it's possible, one element with the grandient and its label with a solid color, applying padding and/or margin too to simulate a border.