Angular Material2 md-checkbox border color

Question

I am using Angular Material 2 and I am trying to apply css on md-checkbox. So far I managed to change background color, but there is no documentation on how to apply on border color.

My code for height-width:

:host /deep/ .mat-checkbox-inner-container{
     height:15px;
     width:15px; 
}

code for background color on check:

 :host /deep/  .mat-checkbox-checked .mat-checkbox-background {
    background-color: #72addc;
} 

but still cannot apply on border color.

Any help is welcome!

Answer 1

For Angular 5+ version

/deep/ .mat-checkbox-frame { 
    border-color: grey 
}

You can learn more about styling components here https://angular.io/guide/component-styles

Answer 2

For Angular 8

::ng-deep .mat-checkbox-frame {
  border-color: white
}

Answer 3

I like to add that "/deep/" is deprecated Now. [from version 8] use "::ng-deep" instead of "/deep/"

First time I removed ":host" but after removing it did not work properly. So I added it again.

CSS Using for Border Color:

:host ::ng-deep .mat-checkbox-frame { 
    border-color: white 
}

CSS Using for Background color change:

:host ::ng-deep  .mat-checkbox-checked .mat-checkbox-background {
    background-color: #01ADE4;
}