The default border radius for a mat form field is 5px for all four sides of it. These border radius are controlled by two mat classes, first, the .mat-form-field-outline-start and second, the .mat-form-field-outline-end.
The .mat-form-field-outline-start class is used to change the border radius of the top-left and bottom-left corners of the mat form field while the .mat-form-field-outline-end class is used to change the border radius of the top-right and bottom-right corners.
So, let’s say you want to set a border radius of 15px for each side of the mat form field. Then, you have to add the following code in your component’s CSS file:
/* Set top-lef and bottom-left corner radius */
:host ::ng-deep .mat-form-field-outline-start {
border-radius: 15px 0 0 15px !important;
min-width: 15px !important;
}
/* Set top-right and bottom-right corner radius */
:host ::ng-deep .mat-form-field-outline-end {
border-radius: 0 15px 15px 0 !important;
}
This is how the mat form field will look like after applying the above styles:
If you want to change the mat form field border color, you can add the following styles in your component’s CSS file. This will change the form field border’s color to green:
/* To change mat form field border color */
:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
color:green;
}
/* To change mat form field border color on focus */
:host ::ng-deep .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline {
color: green;
}
This is how the mat form field will look like after applying the above styles:
