Componente com borda e aparência esquisita

[guilhermebhte]

Tenho este código que muda o componente

mat-form-field .mat-form-field-outline,
.mat-form-field .mat-form-field-outline-start,
.mat-form-field .mat-form-field-outline-gap,
.mat-form-field .mat-form-field-outline-end,
.mat-form-field .mat-form-field-outline-thick,
.mat-form-field .mat-form-field-flex {
  color: #9d4716;
  border-width: 2.5px !important;
  background: #ffffff !important;
  border-radius: 50px 50px 50px 50px !important;
}

<div>
      <mat-form-field appearance="outline" class="componentes">
        <span matPrefix><img src="assets/img/mail.png" /></span>
        <input
          placeholder="Seu email"
          style="padding-left: 10px"
          formControlName="email"
          matInput
          type="email"
        />
      </mat-form-field>
    </div>
    <div>
      <mat-form-field appearance="outline" class="componentes">
        <span matPrefix
          ><img
            style="padding-right: 10px; padding-bottom: 17px"
            src="assets/img/key.png"
        /></span>
        <input
          placeholder="Sua senha"
          formControlName="senha"
          matInput
          type="password"
          [type]="hideSenha ? 'text' : 'password'"
        />
        <mat-icon
          matSuffix
          (click)="hideSenha = !hideSenha"
          style="cursor: pointer"
        >
          {{ hideSenha ? "visibility_off" : "visibility" }}
        </mat-icon>
      </mat-form-field>
    </div>

Só que apareceu isto:

O que pode ser

[guilhermebhte]

Alguma ajuda ?