Remove bottom border of tab group

Question

I want to remove the bottom border of the tabs group which in the image below is gray.

Here is a sample project to show of the code:

https://stackblitz.com/edit/angular-tabs-remove-bottom-border

Answer 1

The border can be found on the .mat-tab-header class.

In your main.css file (or main.scss, styles.css or styles.scss), you can globally define

.remove-border-bottom .mat-tab-header {
    border-bottom: none;
}

And in your HTML file, give the mat-tab-group a class.

<mat-tab-group class="remove-border-bottom">
    <!-- ... -->
</mat-tab-group>

Due to encapsulation, if you want to define the style in your component.scss file, you have to use ::ng-deep:

.remove-border-bottom ::ng-deep .mat-tab-header {
    border-bottom: none;
}

Answer 2

Use this and choose color of your bg :

::ng-deep .mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar {
  background-color: white; // add styles properties here
}