Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Scan QR Challenge submission

@Nelson-elci

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I couldn't add border-radius to the Scan QR image. I tried with border-radius: 30px; but no effect. How do I achieve that?

Community feedback

Tim Avidon 300

@timavidon

Posted

To achieve this you need to do it on the img itself.

try to do,

#scanqr img {
 border-radius: 30px
}

you can also do,

img {
 border-radius: 30px
}

Marked as helpful

0

@Nelson-elci

Posted

@timavidon Thanks, it worked.

1
Bryan Li 3,550

@Zy8712

Posted

There are two ways you can apply border radius to your image. The first way is to apply the border radius directly to the image itself using:

img{
   border-radius: 30px;
}

Alternatively, you can apply border radius to the div surrounding your image and then use overflow: hidden to stop the edges of the image from going outside of the div. In your case:

#scanqr{
   border-radius: 30px
   overflow: hidden;
}

Hope his helps 👍

1

Please log in to post a comment

Log in with GitHub
Discord logo

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