Skip to content
OverviewSolutions
9
Comments
1
Erick Araújo
@araujoerick

All comments

  • Rafael•50
    @rafaelgonzales612Submitted 11 months ago

    When I padded the QR image and started to adjust the border-radius, it was a bit wonky because the image isn't lined up with the border. I'd like to use the same border-radius for both the container and the image itself unless this is just something that I'd have to adjust all the time. Is there a different/more efficient way of doing the above adjustment?

    Thanks for the help!

    QR Code Component using HTML & CSS

    2
    Erick Araújo•130
    @araujoerickPosted 11 months ago

    Hello! To keep the edges aligned I generally combine the padding, border-radius values of the inner element and the outer element. In your case I would do it like this:

    .container {
  background-color: var(--white);
  border-radius: 30px;
  padding: 15px;
  width: 300px;
}

.qr-img {
  border-radius: 15px;
}

    Then just adjust the padding of the texts... Happy studying!

    Marked as helpful
    0