Border Radio on <img src>

Hello everyone. Can anyone explain the below please?

I understand that after creating a class .thick-green-border and applying the property border-radius:10px; the border changes.

However, I don’t understand why the same property would apply on the .smaller-image class. Isn’t the image element independent from the border? and, furthermore, shouldn’t it affect the cat image rather than the border itself when applied?

Lesson link below:

Please help.
Thanks

The property won’t apply on the smaller image class (if that’s the only class) unless you explicitly add the border on it.

Like so:

smaller-image{
border://etc
}

Yet in this case, both classes are added to img:

<img class='class1 class2' />

So you can either add the border on class1, or class2.

1 Like

Both the class is defined in img element that’s why the border-radius is changing on cat photo…

1 Like

Ohhhhh I see! It makes perfect sense now. The reason it works on the .smaller-image class is because the border has been added to it.

Amazing!

Thanks

1 Like

Happy to help, now, move on! :slight_smile:

1 Like