Change (Increase) Border Radius of Mat-Form-Field

Question

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

Answer 1

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

Answer 2

Angular Material 19

You can specify the border radius with design tokens.

(best practice from Angular Material team)

@use '@angular/material' as mat;

:root {
  @include mat.form-field-overrides((
    outlined-container-shape: var(--mat-sys-corner-medium) // example value
  ));
}

(If your form field is "filled" use filled-container-shape)

Here is the available values :

• --mat-sys-corner-none (0)
• --mat-sys-corner-extra-small (4dp)
• --mat-sys-corner-small (8dp)
• --mat-sys-corner-medium (12dp)
• --mat-sys-corner-large (16dp)
• --mat-sys-corner-extra-large (28dp)
• --mat-sys-corner--full (circle)

Density-independent pixels, written as dp (pronounced "dips"), are flexible units that scale to have uniform dimensions on any screen.

(Most values are expressed in absolute dp measurements, except for the full style which is expressed in percentage.)

Resources

https://m3.material.io/styles/shape/shape-scale-tokens#5dcd2195-ed5c-4ab5-be7a-63980c634996 https://github.com/material-components/material-web/blob/main/docs/theming/shape.md#tokens