Home  >  Q&A  >  body text

Border radius doesn't work for img inside anchor point

I am using the following HTML code:

<a class="-video-detail-qualifiers-branding">
    <img src=""/>
</a>

SCSS code:

.-video-detail-qualifiers-branding {
  border: 2px solid #D7C378;
  border-radius: 4px;

  img {
    height: 85px;
    width: 85px;
    padding: 5px;
  }

  img::after {
    border-radius: 4px;
  }
}

Problem: The code above applies border-radius to the anchor tag, but not to the img tag. I want the border radius of both elements to be 4px.

P粉903969231P粉903969231218 days ago474

reply all(1)I'll reply

  • P粉647449444

    P粉6474494442024-04-07 00:06:18

    .-video-detail-qualifiers-branding {
      border: 2px solid #D7C378;
      padding: 5px;
      display: inline-block;
      border-radius: 4px;
    
      img {
        display: block;
        height: 85px;
        width: 85px;
        border-radius: 4px;
      }
    }

    If you remove the padding from <img> and add it to <a> and add display: block; Go to both of them and you can see that border-radius works for both tags. < /p>

    reply
    0
  • Cancelreply