Account Deleted
Hi.
The issue is because children elements are overflowing so their borders are shown.
The solution is to remove all the border-radius
that you have and leave it only in the main tag + you must use the overflow: hidden
property, so children's borders aren't displayed
main {
...
border-radius: 1.5rem;
overflow: hidden;
}
@emestabillo
Posted
Hi @juanmesa2097 I've already tried this and it works for the mobile version. The desktop view has that popup that overflows the container, and applying overflow: hidden
will cut it up to the point of the container's border, which is about half of the popup. Sigh. Thanks for taking a look!
Account Deleted
@emestabillo you can still use it in the image-container
main {
border-radius: 1.5rem
}
main .image-container {
width: 100%;
border-radius: 1.5rem 0 0 1.5rem;
overflow: hidden;
}
Those would be the only places where you would set the border-radius
Another possibility could be background-clip: content-box
but you still need to replicate the border-radius
in the image-container
@emestabillo
Posted
@juanmesa2097 Ah I see, this method will also work. Thank you so much!
Account Deleted
@emestabillo of course, no problem.