Skip to content
Submitted over 3 years ago

HTML, CSS, Flexbox -- (Need help with border-radius)

Daniel Haro•50
@o0oDanielHaroo0o
A solution to the 3-column preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I ran into a problem with the border-radius. Starting at 1055px screen width it seems to flatten out and ends up looking like a regular box. I can't seem to find the source of this issue. Any help would be appreciated!

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

  • darryncodes•6,350
    @darryncodes

    Hi Daniel,

    Nice one!

    You might want to add transition: ease-in .3s; and cursor: pointer; to your button to have more of a button feel and smooth hover affect.

    Marked as helpful
  • P
    Patrick•14,265
    @palgramming

    well you you need to put the border raidus on the corners of your cards that need them

    Put this on your orange card border-radius: 20px 0 0 20px; then look at how the dark cyan card compares to the results on the orange

    the key is you have to transition the border radius corners on the cards depending if it is the mobile or desktop layouts

    Marked as helpful

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