State color bleeding over corners no matter the radius

[Kay0ss]

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

Release with the issue:
1.10.9
Last working release (if known):

Browser and Operating System:
Chrome browser(Win 11) and on HASS android app
It happens at all times no matter the device I'm in.

Description of problem:

It appears the border radius on the right is about a pixel or so off from the slider overlay. I'm able to remove it manually in CSS on the browser by adjusting the right side border radius to a larger radius, but I can't add custom CSS with card mod to the card to get it to stay

Also I know I know small issue, I'm just picky and can't figure it out haha :)

[jensrossbach]

I think this is not a specific problem of this Lovelace card but more a generic problem of the browser's rendering engine. There is a workaround possible as described in this GitHub ghist. Although it is related to the Safari browser, I can confirm that it also works on Chromium-based browsers (tested on Edge and Fully Kiosk).

I say "workaround" because it doesn't solve the problem 100% but at least to a degree that you can hardly see the issue afterwards (especially on displays with high pixel density). Additionally the fix can be permanently applied to the slider-button-card using card-mod (apply to ha-card > div > div.slider).