I used overflow: hidden; but it still doesn’t work.
I tried googling the issue and it seems like you need to use border-collapse property.
I encourage you to learn about it on w3schools
It is working, you just can’t see it.
You can move the background color from #left to the .container instead to see what I mean.
But that causes the color to show up behind the picture on the right side. I want the whole right half of the card to just be the picture with rounded corners.
Yes, but at least it should make you understand why you can’t see it (the element is transparent and nothing is below its corners).
If you remove justify-content: center on *edit I meant on #left.container it (the child element #left) should take up the width out to the corner of the container.
Just to try and explain this a little better.
You have given #left a width of 500px and on its parent flexbox container you have told it to center the content. That (given enough width) will move the child away from the edge of the container. You can see this if you just make the viewport small enough, at some point the border will become visible (because there is no space to center it inside away from the edge).
The container is transparent. It needs a background to be visible, or it needs visible content that takes up its width to its edge for you to see the border-radius.
Another way to see what is happening is to give it an actual border.
border: 2px solid red;
border-radius: 25px;
That should make it more clear what is happening.
Ok thanks I fixed it by giving the parent container width: 1000px; but I don’t know if that is best practice.
1 Like
Now, on the bottom portion where the picture and the info connect, the picture line is slightly higher than the info and they do not align. Do you know why?
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.