Как сделать внутренние закругленные углы с неоднотонным фоном на CSS?

Question

[Сергей]

Если бы фон был белым, можно круги сверху навешать белые, а тут картинка.

Ничего не остается и нужно делать по старинке картинками в размере 8 штук и в таблице?

Comments

[Lynn «Кофеман»]

Кажется тут отлично подойдёт border-image https://developer.mozilla.org/en-US/docs/Web/CSS/b...

[Сергей delphinpro]

lmgtfy.com/?q=inset+border+radius

Answer 1

[Сергей Горячев]

https://habrahabr.ru/post/259603/

Пощупать пример: jsfiddle.net/53vq5pn1
Поковырять исходник: https://github.com/tegArt/border-radius-inset

Comments

[Lynn «Кофеман»]

Рекомендовать в 2017 году рисовать border на canvas довольно печально…

[Сергей Горячев]

Алексей Тен: Печально комментировать ответы без своего варианта, который является лучше.

[Дмитрий]

Sergey Goryachev: да запросто
в гугле по "css border radius inset" варианты и без канваса есть
первые два:
stackoverflow.com/questions/11033615/inset-border-...
https://codepen.io/DimWeb/pen/NAYgpB

[Сергей Горячев]

Дмитрий: Окей, теперь оформи ответом и пусть автор выберет твой ответ лучшим, а мой тут просто повисит для количества.

[Lynn «Кофеман»]

Sergey Goryachev: добавил

Answer 2

[Lynn «Кофеман»]

codepen.io/alexeyten/pen/wJjgML?editors=1100

Например так

Comments

[Сергей]

Хороший вариант, но работает только в хроме.

[Сергей Горячев]

Сергей: FF, Linux Mint

[Lynn «Кофеман»]

Сергей: caniuse.com/#feat=border-image работает почти везде