Как закруглить изображения?

Question

[unlik]

Почему если взять такой кусок html кода

<div class="reviews__avatar">
    <img src="img/feed-photo-1.jpg" alt="" class="reviews__avatar-pic">
</div>

и применить к нему css

.reviews__avatar {
    width: 150px;
    height: 150px;
    border-radius: 50%;
}

то изображения не закругляются?

Answer 1

[Александр null]

или
.reviews__avatar{
overflow: hidden;
}

Comments

[unlik]

Да, так заработало. Но стали обрезаться. Что бы не обрезались пришлось добавить к reviews__avatar-pic display:block

Но не совсем понятно для чего здесь overflow:hidden и display:block? Почему без них отображается не так как надо?

[Александр null]

unlik, все просто
.reviews__avatar это внешний контейнер для аватара, внутри него есть картинка, по сути вашим кодом вы закруглили внешний контейнер, а картинка квадратная, следовательно она отображается как квадратная

overflow:hidden скрывает все что выходит за рамки контейнера(картинка)

более простой вариант закруглить саму картинку reviews__avatar-pic{border-radius:50%;}

Answer 2

[danilstep]

Ты ставишь бордер радиус не указав сам бордер? И как по твоему оно должно работать?
Просто укажи цвет ширину и стиль бордер.

Comments

[unlik]

Что за бред?