Is it possible to make entire border of input mat form field fill red on validation error

Question

In my form i have email field which is customized and i cant use outline appearance input field .

<mat-form-field appearance="fill">
    <mat-label>Enter your email</mat-label>
    <input matInput placeholder="[email protected]" [formControl]="email" required>
    <mat-error *ngIf="email.invalid">{{getErrorMessage()}}</mat-error>
  </mat-form-field>

On validation if there is an error , it appears as below

Is it possible to make it appear as below highlighting entire input field

I could see lot of example for outline appearance form field but not for fill appearance . Can someone guide. TIA

Update:

tried below css still i couldn't able to achieve .

.mat-form-field-appearance-fill .mat-form-field-invalid .mat-form-field-flex {
  border: 4px solid red !important ;
}

would be helpful if there is any hack to achieve this.

Answer 1

::ng-deep .mat-form-field-invalid .mat-form-field-flex {
  border: 2px solid red !important;
  border-bottom: none;
}

You need to use ::ng-deep to get the desired result. Demo Link. Let me know if face any issue.