[Fixed] How to change color for mat-divider?


Is it possible to change mat-divider color?
I tried the following, it didn’t work


<mat-divider class="material-devider"></mat-divider>


.material-devider {
    color: red


Yes, you can.

You need to overrule .mat-divider styling in your own written CSS and change the border-top-color property.

.mat-divider {
    border-top-color: rgba(0, 0, 0, 0.12);

is the default styling by Angular Material.

.mat-divider {
    border-top-color: red;

should be enough to change it (if your CSS gets rendered later than Materials). Otherwise adding increased specificity to your CSS class will help (f.e..mat-divider.mat-divider).

StackBlitz example for this case.

Leave a Reply

(*) Required, Your email will not be published