Looking to hire developers?
I had this doubt, the only way to apply border-radius to the entire grid is to appliy it on every single item separetly?
Any feedback about the project will be welcome :)
@PeresvetIvan
Posted
Hello, Dulce! You can set border-radius to parent element (grid container in this case), and also set 'overflow: hidden'. This way, all child elements will not go beyond the parent element, which means that all their corners will be cut automatically according to the border-radius property on the parent element.
@Diarrah
Posted
There's definitely a way to get each corner of a grid rounded. Just have a container (set to display grid) & then put a border-radius on that whole container.
@iamdulce
Posted
I tried this way, but for reason was only taken by the container and not the items inside:/
@nicm42
Posted
This looks great, I like it.
Only small thing is that setting width of 350px on mobiles will be a problem for anyone with a mobile smaller than that (the smallest iPhones are 320px).
@iamdulce
Posted
So glad you liked it! And thanks for the info about screen size, I'll have it in mind to make it right in the next project
@vr3372
Posted
Hi Dulce
Yes you are correct.Its like three div & give border-radius seperatly.
@iamdulce
Posted
Thanks for your answer!
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord
