Как обрезать часть круга на CSS?

Question

[DaBags]

Верстаю шаблон и в одном блоке есть круглые картинки, всё бы ничего, но низ круга обрезан. С подобным ещё не сталкивался, поэтому нужна помощь.
Накидал пример в jsfiddle чтоб было понятно что мне нужно, может можно сделать это как-то проще или с меньшим количеством кода? https://jsfiddle.net/erfgc5ya/1/
Бордюр вокруг картинки обязателен

Answer 1

[Максим Тимофеев]

1 вариант: https://jsfiddle.net/59yd1qth/1/
2: clip-path, но https://caniuse.com/#search=clip-path
3: svg маска: css.yoksel.ru/svg-masks

Comments

[DaBags]

1. Почему-то не рассматривал вариант помещения картинки в CSS. Но, наверное, лучше будет сделать это без "calc", насколько знаю не все браузеры это поддерживают.
2. Рассматривал данный вариант, но так как не все браузеры поддерживают отказался от этой идеи.
3. С svg совсем не знаком, поэтому тоже не вариант для меня

[Максим Тимофеев]

DaBags, 1. https://caniuse.com/#search=calc не меньше поддержка чем у border-radius https://caniuse.com/#search=border-radius
2. логично
3. там все предельно просто, svg это вообще "наше завтра", так что разобраться стоит точно

[DaBags]

Максим Тимофеев, значит уже поддерживает большинство браузеров. Спасибо, наверное, использую ваше первое решение.