Angular mat-checkbox different border-colors for different checkboxes

Question

I need to change the border colors for the following checkboxes , one to green and other to red.

<div style="margin-left:30%;margin-top: 20%;">
    <mat-checkbox>Hello</mat-checkbox><br>
    <mat-checkbox>Hai</mat-checkbox>
</div>

Answer 1

If you want to overrid specific checkbox border, you can override the class:

.mat-checkbox-frame {
  border-color: red; 
}

If you want to change checkbox color. There is a color attribute.

https://stackblitz.com/edit/angular-rwjynh