Angular Material 15 - How to change border color of a mat-mdc-form-field outline

Question

How do i change mat-form-field apearance outline underline color in Angular Material **Version 15 **

this post stackoverflow were great helpful but i could not change border color with this because we have not $border propertie on mat.define-typography-level( ) material.angular.io

<p>
  <mat-form-field appearance="outline">
    <mat-label>Outline form field</mat-label>
    <input matInput placeholder="Placeholder">
    <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
    <mat-hint>Hint</mat-hint>
  </mat-form-field>
</p>

I tried to overide border without success

mat-form-field{
  background-color: #f3f6f9; // success
  border:2px solid red; // it's add another border so not resolve  
}

Answer 1

You might be looking for css outline-color property.

EX.

<input class="hide-outline-color" />

then in your css

.hide-outline-color:focus-visible {
  outline-color: transparent;
}

Answer 2

I have achieved it this way. So it works, but maybe there is an easier way. I found the neccessary CSS-Classes on the offical MDC Docs

//Top bottom border, if label is inside 
::ng-deep.mdc-notched-outline__notch {
  border-top: 2px solid red !important;
  border-bottom: 2px solid red !important;
}

//Top bottom border, if label is notched
::ng-deep.mdc-notched-outline--notched {
    ::ng-deep.mdc-notched-outline__notch {
       border-top: none !important;
       border-bottom: 2px solid red !important;
    }
}
//Left border with edges
::ng-deep.mdc-notched-outline__leading {
  border: 2px solid red !important;
  border-right: none !important;
}
//Right border with edges
::ng-deep.mdc-notched-outline__trailing {
  border: 2px solid red !important;
  border-left: none !important;
}