Angular Material theming / changing border radius

Question

I am using Angular Material with a theme.

$my-theme-redish: (...
$my-theme-red: (...
$my-theme-celeste: (...

$my-theme-primary: mat-palette($my-theme-redish);
$my-theme-accent:  mat-palette($my-theme-celeste);
$my-theme-warn:    mat-palette($my-theme-red);

$my-app-theme: mat-light-theme((
  color: (
    primary: $my-app-primary,
    accent: $my-app-accent,
    warn: $my-app-warn,
  )
));

Now I also want to theme/change the border-radius. Can I do this in theming? I did not find any documentation on this.

I tried theming by using ::ng-deep or directly adressing certain components:

::ng-deep mat-dialog-container {
  border-radius: 20px !important;
}

But nothing worked.

Answer 1

Demo Did you try to add

.mat-dialog-container {
  border-radius: 20px !important;
}

inside global styles.css

or if you just want this dialog then give custom class with panelClass options as example below

this.dialog.open(dialogComponent, { panelClass: 'custom-container' });

and

.custom-container .mat-dialog-container {
   border-radius: 20px !important;
}

inside global styles.css

Answer 2

For angular V16 add in your custom-theme.scss or in styles.css

 .mat-mdc-dialog-container {
  --mdc-dialog-container-shape: 20px;
}