Ripple of outlined buttons has incorrect corner radius

[Merlin04]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Right now, when you hold down an outlined button, there are gaps between the button ripple and the button outline due to the ripple having an incorrect radius.

Expected Behavior 🤔

When the button is held down, the ripple should fill the entire button, with no gaps between the outline and the ripple.

Steps to Reproduce 🕹

This is visible on the documentation page: https://material-ui.com/components/buttons/#outlined-buttons

Steps:

1. Click on an outlined button and hold it down until the ripple fills the button

Your Environment 🌎

I've tested this on both Firefox 89 and Chromium 91.

`npx @material-ui/envinfo`

  System:
    OS: Linux 5.4 Ubuntu 20.04.2 LTS (Focal Fossa)
  Binaries:
    Node: 14.16.0 - /usr/bin/node
    Yarn: 1.22.5 - /usr/bin/yarn
    npm: 6.14.11 - /usr/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: 89.0
  npmPackages:
    @material-ui/core: ^4.11.4 => 4.11.4 
    @material-ui/styles:  4.11.4 
    @material-ui/system:  4.11.3 
    @material-ui/types:  5.1.0 
    @material-ui/utils:  4.11.2 
    @types/react: ^17.0.4 => 17.0.5 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    typescript: 4.3.2 => 4.2.4 

[kashishmadan]

Hi! I was able to reproduce the behavior and also similar problem happens with the Icon Buttons - (https://material-ui.com/components/buttons/#icon-buttons)
Example -

Can I please work on this issue? @mnajdova

[eps1lon]

@kashishmadan Thanks for the initiative. Feel free to go ahead and work on the issue. If you're stuck at any point during the Pull Request process, be sure to check out CONTRIBUTING or you can ping any of the maintainers for more guidance.