Background artifacts on right side of card

[reidprichard]

Checklist:

• [X] I updated to the latest version available
• [X] I cleared the cache of my browser

Release with the issue: 1.10.3

Last working release (if known): n/a

Browser and Operating System: Firefox + Edge, Windows 11; Android app

Description of problem:

With Home Assistant's dark theme, artifacts appear on right side of the card. These appear to be the color of the slider. Setting --ha-card-border-radius to 0px or setting overflow to auto both fix the issue, but obviously remove the ability to have a radiused border.

Depending on browser and zoom level, these artifacts might show up on just the radii or on the entire right-hand side of some or all cards. Here are some screenshots (I've increased the border radius to make the issue more visible).

Firefox, 100% zoom:

Firefox, 120% zoom:

Edge (175% zoom, although all zoom levels look the same):

Javascript errors shown in the web inspector (if applicable): n/a

Additional information: n/a

[VNRARA]

I kinda fixed it by using card-mod and changing up the border radius like this:

  .slider[data-background="gradient"] .slider-bg {
    border-radius: 12px 12px 0 0;
  }
  .type-custom-slider-button-card {
    border-radius: 10px 10px 0 0;
  }

Of course for my case the border needs only 2 out of 4 sides. Because I grouped them and the bottom part of the group has the bottom part rounded.