Как починить скругление в Хроме

В Chrome уже достаточно давно присутствует баг border-radius — становится виден край фона или фоновой картинки

Вот несколько попыток починить такое поведение

• Стандартный outline — нет, всё равно уголок будет виден
• SVG со скругленными углами и маска — нет.
  Необходимо разрешить SVG менять пропорции.
  При таком решении не получится сохранить фиксированный радиус углов, он будет зависеть от размера блока.
• clip-path - в чистом виде не поможет.
  clip-path: inset(0 0 round 20px); — при радиусе равном радиусу скругления не поможет.
  Как вариант можно попробовать задавать чуть меньший радиус. Например, если исходный был 20px, то при 18px в clip-path, баг будет незаметен. Если использовать calc в сочетании с кастомным свойством для радиуса скругления, то вполне можно пользоваться.
• Лучший на данный момент вариант это хак с маской и радиальным градиентом.
  mask-image: radial-gradient(white, black);
  Скрывает недостатки и ни от чего не зависит.

Посмотрите живую реализацию примеров:

See the pen (@Websitio) on CodePen.