angularangular-material-table

How to get rid of horizontal line in mat-tab-group


When I moved to material 3 I noticed that there is a horizontal line between tab header and tab content. Actually, it was already there in angular 17, but I used material 2 at that time. Is there a way to get rid of it?

I tried to find it using the Chrome dev-tool but had not luck. The documentation calls it divider, but I cannot detect any mat-divider in the dom. Is there a setting or css-variable I can use? Please see the below screenshot where the line is marked in yellow.

enter image description here


Solution

  • Set bottom border on .mat-mdc-tab-link-container.

    enter image description here