Skip to content
Submitted almost 2 years ago

QR Code Component

TdevDev•30
@TdevDev
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

One problem I had during the process was getting rounded corners on the QR code image. I tried to round the corners on the div in which I put the image in, but that did not work. So, I manually added a border-radius directly to the img element. I still can't figure out why I could not round the corners through the div element.

Community feedback

  • Favour•2,160
    @Nadine-GreenPosted almost 2 years ago

    HEY TDEVDEV!

    Concerning your question, what you will need to do is give the <article class="qrcode"> a border-radius and then use the code overflow: hidden, this should allow the top corners to be rounded as well.

    HOPE I COULD BE OF HELP :)

    HAPPY CODING!

    1
    TdevDev•30
    @TdevDevPosted almost 2 years ago

    @Nadine-Green Thank you for your reply, but this did not do the trick.

    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