Changing background color in outline input field

This is hideous code but sets the background-color such that the its in the rounded portion only. As opposed to seeing tiny corners of background outside the outline.

:host ::ng-deep mat-form-field .mat-form-field-outline-start {
  background-color: white !important;
}

:host ::ng-deep mat-form-field .mat-form-field-outline-gap {
  background-color: white !important;
}

:host ::ng-deep mat-form-field .mat-form-field-outline-end {
  background-color: white !important;
}

You can add border-radius to the div where you are changing the background.

I have tested border-radius: 5px and it looks good.

Code for you

I am assuming this background CSS is working for you. I just tried this with your selector.

::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
  background-color: white;
  border-radius: 5px;
}

Screenshot: http://prntscr.com/nanu75