Skip to content
Submitted over 1 year ago

Solution for 3 Column Prev Card (Not yet responsive)

h415232•110
@h415232
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi all,

I had difficulty in rounding up the corners of the card. I know that we can use border-radius property to make the corners rounded, however, adding it in my CSS class "card" did not work.

Wondering what should I do to make the border-radius work. Any answer will do!

Also, would be happy to hear feedback from anyone to improve my code.

Thanks! :)

Community feedback

  • R Hayes•240
    @ryanthayesPosted over 1 year ago

    Try adding overflow: hidden; to your .card element.

    .card { width: 50rem; height: 28rem; display: flex; border-radius: 1rem; overflow: hidden; }

    Marked as helpful
    1
    h415232•110
    @h415232Posted over 1 year ago

    @ryanthayes thanks for the feedback!

    I can confirm that by adding overflow: hidden in my .card class, the border-radius property now works as expected.

    I might need to read more on the property overflow to understand this better.

    Thanks so much! :)

    0
    R Hayes•240
    @ryanthayesPosted over 1 year ago

    @h415232

    What the overflow:hidden does in this case is hide the corners of the children elements. When rounding the parent element, the corners of the child elements essentially stick out.

    https://markheath.net/post/keep-inside-rounded-corners-css

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

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