How to Change Mat Form Field Border Radius in Angular Material?

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:

change mat form field border radius

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:

change mat form field border color

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.