'Change (Increase) Border Radius of Mat-Form-Field [closed]

I'm working in an Angular 11 Project that's using Material.

I have some mat-form-fields with inputs. I'm using the outline appearance, and I want to change the border radius of the outline (I want to increase it).

I read over this stackoverflow: How to remove the outline mat-form-filed border corner radius .

But none of those solutions are allowing me to increase the border correctly. It get's close, but it causes a weird thing on the left side of the input: enter image description here

I do not want to use encapsulation. I'm fine with using ::ng-deep.

Here's a stackblitz demo: https://stackblitz.com/edit/angular-9-material-starter-pp4349?file=src%2Fapp%2Fapp.component.css



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source