Archived topic
Container border-radius within container
5 replies · Started by Takeru on April 6, 2022
When placing multiple levels of container blocks, the border-radius of the outermost container block does not work.
Specifically, if the border-radius of the outermost container block is 16px and the border-radius of the inner container block is 0 and the background color is set, the background color will overflow.
What settings should I make to prevent the background color from sticking out?
Hi Marumoro,
To have a better understanding of the issue, may you kindly provide the link to the site in question?
You may use the private information field if your prefer: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information
Hope to hear from you soon. :)
Please check.
I see. Thank you for sending screenshots.
One approach to resolve this is to add a custom CSS class my-overflow-none to the parent Container Block as such: https://share.getcloudapp.com/yAuKkXqZ
Then, add this CSS in Appearance > Customize > Additional CSS:
.my-overflow-none {
overflow:hidden;
}
This should hide overflowing elements effectively.
Hope this helps! Kindly let us know how it goes. :)
GREAT!!!
Thank you👍
Glad that worked! :)
Feel free to reach out anytime you’ll need assistance with anything else. 👍
