My page - Does grid have a special way of applying a border radius or is my CSS completely wrong? I can see it’s being applied, just not to the main grid container.
Cheers.
Nope, no special way. The inner elements still have a right-angled border, that doesn’t stop being true if you apply a border-radius to a parent. Nothing to do with grid.
If you are giving the child elements a border (which you are in this case, they have that red border as well), then you’ll need to apply a border radius to them too (slightly smaller radius else it’ll look a bit strange).
If they didn’t have a border, then either you could use overflow: hidden on the parent (.grid-container) to clip off anything that strays outside it. Or if the child elements need the same background colour, set the background colour to transparent on them so that the parent background colour shows through.
1 Like
Ah, I see. I was trying to treat it as if it was one container but it’s 3. I don’t know why I thought that, perhaps just because I wrapped it in a container.
I was wondering why I never have this issue with flex-box then I realised I’ve never actually worked with more than one element.
I ended using border-radius: 0 0 0 20px; to target just the one side and changed for each corner.
Thank you.
1 Like