angular material - How to change Divider color

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styles: [`
      .mat-divider {
        border-top-color: rgba(0,0,255,0.12);
      }
  `]
})


export class AppComponent { }

app.component.html

<h2 style="padding-top:25px; padding-bottom:25px;">
    Angular Material - How to change Divider color
</h2>


<h3>I am top</h3>
<mat-divider></mat-divider>

<h3>I am middle</h3>
<mat-divider></mat-divider>

<h3>I am bottom</h3>

app.module.ts [import]

import {MatDividerModule} from '@angular/material/divider'

More Angular tutorials

• angular - How to use clearInterval()
• angular material - Show custom color in Progress bar
• angular material - How to change Progress bar height
• angular material - How to change Progress bar width
• angular material - How to change vertical Divider height
• angular material - How to change Divider margin
• angular material - How to use Progress spinner
• angular material - How to use determinate Progress spinner
• angular material - Progress spinner with percentage
• angular material - How to change Progress spinner size
• angular material - How to delete Tab programmatically
• angular material - How to show remove button on Tab label
• angular material - How to show Tab label bottom of content
• angular material - Slider custom formatted thumb label
• angular material - How to use Slider change event