Skip to content
Submitted over 4 years ago

Used ReactJS and CSS. Responsive for desktop, tablet, and mobile.

Chris Stolba•170
@chrisstolba
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I couldn't get the card's top borders to be flat like in the design. They all have a slight curve at the border-radius edge. How can I get them to be flat like the in the design?

Community feedback

  • Matt Studdert•13,611
    @mattstuddertPosted over 4 years ago

    Awesome work on this challenge, Chris! You've done a really good job and your solution scales down well to mobile.

    For the top borders, you need to have the same value for the border-width and the border-radius. For example, you having border-top: 5px solid var(--red); and border-radius: 5px would resolve it.

    Let me know if you have any questions. Keep up the great work! 👍

    1
  • Chris Stolba•170
    @chrisstolbaPosted over 4 years ago

    Great feedback! And, it was from the founder!? I am honored.

    I am happy to have found your site, the concept behind it is great.

    Thank you.

    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