Как скруглить картинку в контейнере с border-radius?

Question

[Azamat_TURBO]

Не получается скруглить картинку в контейнере с border-radius. Как это можно пофиксить?

https://codepen.io/Azamat_TURBO/pen/YmpERB

Answer 1

[Luka Tarkhnishvili]

Можете прописать на класс .card {overflow:hidden }
или img {border-radius: 20px}.
Если хотите скруглить только верхную часть картинки, тогда img {border-top-right-radius:20px; border-top-left-radius:20px}

Answer 2

[Brad9aga]

https://jsfiddle.net/arL7pmbc/
https://jsfiddle.net/j6Ls0ur9/

Answer 3

[AngryYum]

border-radius: 20px; самой картинке да и все)
Вы же пытаетесь скруглить див где лежит картинка, а не смогу картинку)

Answer 4

[Сергей Карвасарный]

если хочешь через блок то нужно блоку указать overflow: hidden он обрежет картинку тогда или просто сделать бордер картинке)