How to style a custom rounded underline in a Angular Material Tab

Issue

Our designers want us to implement underlines to look like this:

It's essentially the top half of a rectangle with rounded corners. However, we're using Angular Material and I'm not having any luck styling the existing component (https://material.angular.io/components/tabs/examples)

I was able to make the default underline thicker with rounded corners by setting these to variables:

--mdc-tab-indicator-active-indicator-height: 6px;
--mdc-tab-indicator-active-indicator-shape: 10px;

This is what I currently have:

I'm not even sure how to search for what I'm trying to do here. Any tips are appreciated before I skip using the Material component and building something myself.

Solution

@Thuan mentioned, below is the CSS to do it, with a working example!

.mdc-tab-indicator .mdc-tab-indicator__content {
  color: #a31b56 !important;
  border-color: #a31b56 !important;
  border-top-width: 7px !important;
  border-top-right-radius: 5px !important;
  border-top-left-radius: 5px !important;
}

stackblitz

Answered By - Naren Murali