Skip to content
Submitted over 2 years ago

order-summary-component-main

Sathya D•310
@satzzzzz07
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Order summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hey Guys, Open to feedback and suggestions.

I was wondering why I was not able to add a border-radius at the bottom. I tried some solutions. Not working. Kindly advise on that. Thanks

Community feedback

  • Muazzam•180
    @MuazzyPosted over 2 years ago

    Nice job sathya, it looks like the "main" div's property "border-collapse:" was set to "collapse" which was preventing the border-radius to show. just modify these lines and you will be good to go.

    main { border-collapse: separate; border-radius: 1rem; overflow: hidden; //hide the image corners which are overflowing }

    main img { border-radius: 7px 7px 0 0; //remove this line }

    Marked as helpful
    0
    Sathya D•310
    @satzzzzz07Posted over 2 years ago

    @Muazzy Thanks 👍. Why is it getting updated to collapse. when i did not set it in the first place. any reason why this is happening.

    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