I'm using mat-basic-chip with custom CSS, but I see a black border around the chip. any help...

The mat-chip has a funny black border on clicking. I'm not able to figure out what is creating the black border. here is the template and CSS

<mat-chip-list class="flex-full-width">
<ng-container *ngFor="let opt of question.options">
<mat-basic-chip #lbl="matChip" (click)="chipControlOnSelect(question.key,opt.key,fi,fgi, lbl)">
{{opt.value}}</mat-basic-chip>
</ng-container>
</mat-chip-list>

//style.scss
mat-basic-chip {
display: inline-flex;
padding: 7px 12px;
align-items: center;
cursor: pointer;
border: 1px solid #9B9B9B;
border-radius: 20px;
opacity: 1;
margin-left: 10px;
font: Medium 14px/16px Roboto;
&.mat-chip-selected {
border: 1px solid $radio-yes-border-color;
background-color: $radio-yes-background-color;
}
&:hover{
background-color: $radio-yes-background-color;
}
}




Continue reading...