How to get the borders to be curved properly (containers within container)?

Ask us anything How do I?
1

Hi, I have 4 containers in a bigger container.

image
image1374×206 18 KB

The big container has no border and radius 8px, overflow is hidden (as adviced on a similar post I made before). But this time this solution is not working…

Here’s how the schema of the big container looks like:

image
image1070×822 50.6 KB

The 4 smaller containers have 1px border and no radius, overflow is unset.

But how do I get the borders to curve properly? It is currently not showing properly.

I don’t want to set the border on the big container and not have borders on the small containers, as the left and right in between the containers have to have a border as well…

Also it may not be 4 containers, it could be 2 or 3 or 4 so I don’t know which one would have the left / right border. so the border has to be done on the smaller containers. But now its not showing the curve properly? I can’t set the curve on the smaller containers as well, because the corner containers may not be the corner containers in the future.

I hope this makes sense.

2 Likes
2

Thank you for your question. Let me check with the team and see how we can assist you. I will get back to you as soon as possible.

3

I would personally go for the border on the parent container and either use divider divs between the tabs or have only right border on all of the items except the last one

4

You can simply use the overflow property and set it to hidden or none on the rounded corner div - the wrapper as luka mentioned.