I'm working in an Angular Project using Material.

I have some mat-form-fields with inputs with the outline appearance. I'd like to change the border radius of the outline (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:

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

For Angular Material >= 16

All you need to do is override a css variable --mdc-outlined-text-field-container-shape.

Inside a global stylesheet included after your Material theme:

.mdc-text-field--outlined {
  --mdc-outlined-text-field-container-shape: 28px !important;
}

Or directly inside a component style:

:host ::ng-deep .mdc-text-field--outlined {
  --mdc-outlined-text-field-container-shape: 28px;
}

Note: ::ng-deep is deprecated, other approach like using global style, disabling style encapsulation or using a custom CSS class are recommended.

https://stackblitz.com/edit/stackblitz-starters-tvogak?file=src%2Fmain.ts

For Angular Material == 15

Same as version 16+, but use the css variable --mdc-shape-small instead.

.mdc-text-field--outlined {
  --mdc-shape-small: 28px !important;
}

For Angular Material <= 14

You need to increase the min-width of the left and right outline and apply a proper border radius to both sides.

::ng-deep .mat-form-field-outline-start {
  border-radius: 28px 0 0 28px !important;
  min-width: 28px !important;
}

::ng-deep .mat-form-field-outline-end {
  border-radius: 0 28px 28px 0 !important;
  min-width: 28px !important;
}

/* Add padding to move the label and input into the center to prevent overlapping the rounded border */
::ng-deep .mat-form-field-appearance-outline .mat-form-field-flex {
  padding: 0 32px !important;
}

https://stackblitz.com/edit/angular-9-material-starter-yjtz7l?file=src%2Fapp%2Fapp.component.css

---

Disclaimer

Angular strongly discourages, and does not directly support, overriding component CSS outside the theming APIs described above. Component DOM structure and CSS classes are considered private implementation details that may change at any time.

From https://material.angular.io/guide/theming#style-customization-outside-the-theming-system