Border radius theme props not interpolated for specific corners

[eloiqs]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/gracious-dubinsky-sg8yzv?file=/src/App.tsx

Current workaround is to interpolate manually by multiplying with theme.shape.borderRadius, but I think it would be consistent with api design of @mui to include those prop interpolations.

Current behavior 😯

sx props borderTopLeftRadius, borderTopRightRadius, borderbottomLeftRadius, borderBottomRightRadius, don't interpolate theme props like borderRadius does

Expected behavior 🤔

same behavior as borderRadius

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

[DiegoAndai]

Hey @brijeshb42 may I ask you to take a look into this one? 😊