-1

I am using the below 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 above code is applying the border-radius to the anchor tag but it is not applying border-radius to the img tag. I want both of the elements must have a border-radius of 4px.

HarshSharma
  • 630
  • 3
  • 9
  • 34
  • Remove `::after`. You want it on the image, not a pseudo element after the image. – ray Oct 30 '22 at 19:29
  • @ray - Even if I remove it and put in the img tag it is not working. – HarshSharma Oct 30 '22 at 19:31
  • You have padding on the image. That will be getting the radius effect but you can’t see (even when putting it on the img not an after) because there is no background color. Small point, though not relevant here because after won’t help do what you want, but just to note that an img can’t, in the standard, have an after pseudo element. – A Haworth Oct 30 '22 at 20:18
  • `img` is a replaced element and `::after` does not work on replaced elements! – tacoshy Oct 30 '22 at 20:43

1 Answers1

1
.-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 padding from <img>, and add it to <a>, and add display: block; to both of them, you can see that border-radius is working for both tags.

Ziya Mamedov
  • 23
  • 6