Ripple of outlined buttons has incorrect corner radius

• 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.

  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 

Start with the outlined-buttons example on the documentation page and reproduce the issue by holding an outlined button until the ripple fills it. Trace the outlined button and ripple styling from that example; done means the ripple reaches the button outline without visible gaps in Firefox and Chromium.