Повернуть радиус границы ⇐ CSS

[Anonymous]

Я хочу оформить кнопку так, чтобы она выглядела как первое изображение, но, к сожалению, как бы я ни старалась, мне не удается закруглить углы изображения. Только верхний левый угол становится закругленным. Как это исправить?
Фото с сайта, который я создаю:
[img]https://i.sstatic .net/owkZnuA4.png[/img]

Сайт, который я сделал сам.:
[img]https://i.sstatic .net/M6fWGJep.png[/img]

Код: Выделить всё

.image-container {
position: relative;
overflow: hidden;
display: inline-block;
margin: 10px 5px;
border-radius: 20px;
}

.image-container img {
display: block;
width: 100%;
height: auto;
}

.hover-image {
width: 100%;
transition: transform 0.7s ease;
}

.image-container:hover .hover-image {
transform: scale(1.1);
}

.text-overlay {
position: absolute;
top: 20px;
right: 30px;
width: 50%;
}

.btn-bottom-right {

padding: 10px 20px;
background-color: black;
color: white;
border: none;
border-radius: 20px 20px 20px 20px;
cursor: pointer;
transition: background-color 0.3s ease;
}

.bg-banner-btn {
background-color: white;
border-radius: 30px 30px 0px 0px;
padding: 10px 0 0 10px;
position: absolute;
bottom: 0px;
right: 0px;
}

.btn-bottom-right:hover {
background-color: #424649;
}

Код: Выделить всё

[img]https://via.placeholder.com/1200/800[/img]

کت و شلوار زنانه
زرق و برق بی انتهای مخصولات تاکسیدو
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
استفاده از طراحان گرافیک است.

مشاهده و خرید

Подробнее здесь: https://stackoverflow.com/questions/792 ... der-radius