Rounded Corners for Scrollbar in Angular with webkit-scrollbar-button

I am using Angular, Angular Material and CSS

I am having a mat-select Dropdown and it looks like below.

I came to know that we can achieve the Rounded corners on all sides of the Dropdown panel with webkit-scrollbar

I am struggling to achieve this…Can anyone point me out in the right direction?

Along with this, how can I use panelClass of Angular Material 14 to make the Dropdown panel not overlapping with the Dropdown Textbox.

I am able to achieve Rounded Top Right Corner with the below code..

.custom-panel-siteId::-webkit-scrollbar-button:single-button:vertical:increment {
    overflow: visible !important;
    border-radius: 4px 4px 4px 4px !important;
}

But for Bottom Right Corner is not coming as Rounded.

EDIT

The below solution particularly applies for my only control instead of applying for the whole project..

.custom-panel-siteId::-webkit-scrollbar {
  border-radius: 5px;
}

.custom-panel-siteId::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

.custom-panel-siteId::-webkit-scrollbar-thumb {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

Is it possible to apply only the rounded corner instead of modifying the styles of the scrollbar thumb and track?

Any help would be greatly appreciated.

You can do by customizing the scrollbar, but note, this will affect all scrollbars in your application, better not to do, else go for my previous answer!

::-webkit-scrollbar {
  border-radius: 5px;
}
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

.custom-panel-frequency {
  border-radius: 5px !important;
}

Stackblitz Demo