How to make Rounded corner for the mat-select Dropdown on all corners

Question

I have a mat-select Dropdown in Angular, Angular Material and css

How can I create a rounded corner for the mat-select dropdown?

Answer 1

It is doable, you can do with the below CSS. But you need to note a few points

• This change will be applied for all select components and elements that have the class cdk-overlay-pane, we cannot isolate the fix to only one select

• Its better you do not do this fix, because we cannot be sure where it will impact the UI

css

// to add curved edges
.cdk-overlay-pane {
  overflow: hidden !important;
  border-radius: 5px !important;
}

html

<mat-form-field appearance="outline" class="form-field-custom">
  <mat-select
    class="frequency-dimensions"
    formControlName="frequency"
    (change)="disableSubmitButton=false"
    disableOptionCentering
    panelClass="custom-panel-frequency"
  >
    <mat-option value="daily" selected>Daily</mat-option>
    <mat-option value="total">Total</mat-option>
    <mat-option value="total">Total</mat-option>
    <mat-option value="total">Total</mat-option>
    <mat-option value="total">Total</mat-option>
    <mat-option value="total">Total</mat-option>
    <mat-option value="total">Total</mat-option>
    <mat-option value="total">Total</mat-option>
  </mat-select>
</mat-form-field>