ionic ion-menu border-radius is not changing

Issue

I need to border-radius in ion-menu but when i am doing its applying on shadows of entire page. i need to just do in white menu.

This is how its showing

I need to show like this

My app.component.html

<ion-app>
    <ion-menu side="end"  contentId="menu-content">

    <ion-content >
        <div >

        <div style="text-align: right;">
            <ion-icon name="more" style="font-size: 25px;"></ion-icon>
        </div>
        <div style="display: flex; justify-content: center;">
            <ion-avatar style="text-align: center;">
             <img src="../../assets/img/demo.jpg">
            </ion-avatar>
        </div>
        <div style="text-align: center; margin-top: 15px; font-size: 18px;">
            Downloads
        </div>
        <div style="text-align: center; margin-top: 15px; font-size: 18px;">
            Sign Out
        </div>
        <div style="text-align: center; margin-top: 15px; font-size: 18px;">

        </div>
    </div>

    </ion-content>

    </ion-menu>
<ion-router-outlet id="menu-content"></ion-router-outlet>
</ion-app>

global.scss

ion-menu{
--background: white !important;
  --width: 150px;
  --height: 170px;

}

When i add border-radius in ion-menu its just change the radius on entire blur page. I need to know hoe can i change the radis of just white box which have width of 150px;

Solution

Sergey was right, for these kinds of things you need to use popover - https://ionicframework.com/docs/api/popover.

Using your code I was able to create quickly the UI you needed.

Also, I've put the code on github so you could see what I did there: https://github.com/App-to-date/menu-popover

Answered By - Monomachus