Ripple tap-highlight: no border-radius on Safari based clients

[Bat-Maniac]

Checklist

• [x] I updated the card to the latest version available

• [x] I cleared the cache of my browser

Describe the bug The ripple tap-highlight (ha-card#card.button-card-main.type-custom-button-card > mwc-ripple#ripple) has no border-radius when using Safari-Browser (and Safari-Clients like the iOS and Mac OS companion-apps).

I've fixed this issue by injecting custom CSS with extra_styles like this:

extra_styles: |
   #ripple {
      border-radius: 18px;
      -webkit-border-radius: 18px;
      -webkit-mask-image: -webkit-radial-gradient(white, black) !important;
   }

I think the last style attribute is the important one: -webkit-mask-image: -webkit-radial-gradient(white, black) !important;

Version of the card Version: 3.4.2

Desktop (please complete the following information):

• Browser [Safari]
• Version [15.2]

Smartphone (please complete the following information):

• Device: [iPhone 12 Pro Max, MacBook Air M1]
• OS: [iOS 15.2]
• Browser [Safari]
• Version [15.2]

Additional context Maybe you could add the fix i suggested above into the code.

[L-E-0-N]

@Bat-Maniac Thanks for the fix, also encountered the bug and this fixed it perfectly!