# Cannot apply border-radius to ion-popover

**URL:** <https://forum.ionicframework.com/t/cannot-apply-border-radius-to-ion-popover/244817>\
**Category:** Ionic Angular\
**Created:** [October 22, 2024, 8:25pm UTC](https://forum.ionicframework.com/t/cannot-apply-border-radius-to-ion-popover/244817 "2024-10-22T20:25:03Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![tjkatz](https://avatars.discourse-cdn.com/v4/letter/t/82dd89/32.png) [@tjkatz](https://forum.ionicframework.com/u/tjkatz)\
**Post date:** [October 22, 2024, 8:25pm UTC](https://forum.ionicframework.com/t/cannot-apply-border-radius-to-ion-popover/244817/1 "2024-10-22T20:25:03Z")

</div>

I have tried absolutely everything but cannot apply a border radius to ion-popover. I am using an inline ion-popover on the latest angular and ionic. I am using standalone mode and have tried both including the styles in the component and in global.css, nothing works.

I have consulted this GitHub issue: [ion-popover add --border-radius variable · Issue #20000 · ionic-team/ionic-framework · GitHub](https://github.com/ionic-team/ionic-framework/issues/20000)

However, that issue is totally useless as no suggestions are provided and the codepen does not work (popover doesn’t even open).

For reference, here is a CSS class I have:

```auto
ion-popover.app-menu-queue-menu ion-content {
    --background: blue;
    border-radius: 25px !important;

    ion-item {
        --border-radius: 25px;
    }
}

```

The background of the ion-popover does indeed turn blue and the items do indeed have a border radius of 25px. However, the border-radius on the content (right next to background) has zero effect. It makes no difference if this is in global.css, whether or not I include `!important`, whether or not I include `ion-content` in the class, etc. Nothing works.

I am sharing here before opening a GitHub issue. Seems it should not be this complicated.

EDIT:  
Ok I have noticed something very strange. When I target the popover in CSS and exclude `ion-content` I am actually seeing that the entire screen is covered with a blue backdrop when using `background: blue`. This means that the styles are actually not being applied to the popover itself but to its backdrop. Further, I can also see that the border-radius is also being applied to the backdrop, not the content of the popover itself.

Seems this is 100% a bug.

---

<div class="post-metadata">

**Author:** ![tjkatz](https://avatars.discourse-cdn.com/v4/letter/t/82dd89/32.png) [@tjkatz](https://forum.ionicframework.com/u/tjkatz)\
**Post date:** [October 22, 2024, 8:42pm UTC](https://forum.ionicframework.com/t/cannot-apply-border-radius-to-ion-popover/244817/2 "2024-10-22T20:42:33Z")

</div>

I have solved this issue using shadow part selection:

```auto
ion-popover.app-menu-queue-menu::part(content) {
    border-radius: 15px;
}

```

Such a simple solution and yet not documented anywhere and that other similar GitHub issue points in the wrong direction claiming NOT to use shadow part styling. Indeed, this is the ONLY way to do it! I may open GitHub issue to update docs, not sure about this one.