Make rounded edge corners on whole page with CSS?

Question

I'm trying to add CSS to my PWA app so it can look better on "notch" devices. I roughly drew it and pointed it out with the red arrows. Here is my website if you need to inspect element the CSS classes: https://kyle.awayan.com/. Are there any recommendations on how to achieve this, to get border-radius or something to work with the whole page globally? I tried putting it in body but it doesn't work. Another edit: tried to add border-radius to a wrapped div (specifically gallery if you inspect element my website), and it makes all the items (pictures, menu, etc.) rounded, but not only the edges of the page.

Answer 1

For me the above borders were implemented by the following code in CSS:

overflow-y: scroll;
style="border: solid; padding: 15px; border-radius: 15px "

Answer 2

I got it, I just used the __next div as a wrapped div, and placed this CSS in here from this https://codepen.io/chriscoyier/pen/EmKCa (which was from https://css-tricks.com/body-border-rounded-inside/). After modifying it, I was left with this:

#__next {
    border-radius: 10px;
    overflow-y: scroll;
}

Looks like I had to add overflow-y: scroll for the border-radius to work.

Edit: It also works when I put it in the body tag. FYI putting overflow-y: scroll messes up with scrolling listeners, so my infinite scrolling doesn't work anymore. Might not want this solution since I don't want to put all the scrolling listeners on one single div... there's a lot of things on my website that react to scrolling on various pages. But here is the answer for people that want to achieve the same thing.