Components: mat-button ripple should respect border-radius

[devinci]

Bug, feature request, or proposal:

[x] : Bug

What is the expected behavior?

Ripple effect should respect border-radius.

What is the current behavior?

Ripple ignores mat-button border-radius.

What are the steps to reproduce?

Add border-radius to button

https://stackblitz.com/edit/angular-material2-issue-mykhbz

What is the use-case or motivation for changing an existing behavior?

Effects and child elements should respect parent styles unless otherwise defined.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

OS: Windows 10
Browser: Chrome

Angular: 5.0.3
Angular-CLI: 1.5.4
Material: 5.0.0
TypeScript: 2.4.2

[Eddygn]

This also happens on Tabs, when the tab group is given border radius, the first tab ripple will be square, while the top left (in ltr, and right in rtl) corner is rounded.

[Mischazz]

That issue still occurs on Safari

Angular: 6.1.3
Angular-CLI: 6.1.3
Material: 6.4.5
TypeScript: 2.9.2

[jbarnabe]

@tinayuangao I confirm this issue still occurs on Safari

[niklissad]

catch this issue on Safari too
"@angular/material": "6.4.7"

[LuisReinoso]

I have this issue using MatRipple directive on:
Chrome: 72
Angular: 7.2.11
Angular-CLI: 7.3.7
Material: 7.3.6

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}