Angular Material - Set border color on a specific mat-expansion-panel

Question

I would like to change the border color and width of the mat-expansion-panel that has a specific class.

html

<div>
  <mat-accordion>
    <mat-expansion-panel *ngFor="let item of itemList; let i=index"
                        [hideToggle]="true"
                        [class.selected]="item.selected">
      <mat-expansion-panel-header>
        <mat-panel-title>{{item.header}}</mat-panel-title>
      </mat-expansion-panel-header>
      {{item.content}}
    </mat-expansion-panel>
  </mat-accordion>
</div>

ts

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

interface Item {
  header: string;
  content: string;
  selected: boolean;
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
    public itemList: Item[] = [
    {
      header: 'Item1',
      content: 'This is item1.',
      selected: false,
    },
    {
      header: 'Item2',
      content: 'This is item2.',
      selected: true,
    }
  ];

}

css

.selected { 
  border-width: 2px;
  border-color: red;
}

I would like to set the border color red and width 2px for Item2. But the above example does not work.

StackBlitz

How can I fix?

Answer 1

You also need to set the border-style of the border.

.selected { 
  border-style: solid;
  border-width: 2px;
  border-color: red;
}

Or even better:

.selected { 
  border: solid 2px red;
}

Here's the StackBlitz with the change.

If you actually only want to set the style for the bottom border use:

.selected { 
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color: red;
}

Or:

.selected { 
  border-bottom: solid 2px red;
}