Как округлить изображение с помощью CSS

Question

Я пытаюсь воссоздать форму изображения, основанную исключительно на CSS. Хотя кажется, что очень трудно создать такую ​​точную форму, я не могу найти свойства CSS, которые могли бы решить, кроме создания контура в svg и передачи его в свойстве CSS, но это кажется неправильным.

Поэтому я хотел бы знать, что если я что-то упускаю, это кажется простой задачей.

Форма изображения можно увидеть здесь:

Это не простой вопрос border-radius, как предполагает ранее отмеченный дубликат, поскольку он выпирает в «сторонах», где он будет прямым, если использовать border-radius или «to-round».

Answer 1

Видимо форма называется Squircle. После того, как я нашел этот термин, было довольно легко найти человека, который уже нашел решение для создания формы. Я оставлю решение здесь, если оно понадобится кому-то другому (определенно не так просто, как border-radius):

Пожалуйста, имейте в виду, что я НЕ создал это решение, все заслуги должны быть отданы Mkmueller, https://codepen.io/mkmueller/, за его решение здесь: https://codepen.io/mkmueller/pen/wRJYKa

* {
    box-sizing: border-box;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
}

svg.defs {
    position: absolute;
    width: 0;
    height: 0;
}

.squircle {
    width: 75vmin;
    height: 75vmin;
    background: url(https://source.unsplash.com/user/mkmueller/likes/1000x1000) center / cover, #aaa;
    clip-path: url(#squircle);
}

.wrapper {
    filter: drop-shadow(0 0 100px rgba(#000, .25));
}

<svg class="defs">
    <defs>
        <clipPath id="squircle" clipPathUnits="objectBoundingBox">
            <path d="M .5 0 C .1 0 0 .1 0 .5 0 .9 .1 1 .5 1 .9 1 1 .9 1 .5 1 .1 .9 0 .5 0 Z" fill="#f00"/>
        </clipPath>
    </defs>
</svg>

<div class="wrapper">
    <div class="squircle"></div>
</div>