Как сделать скругленную градиентную границу border для блока с прозрачным фоном?

Question

[yourfavouritefish]

Есть блок, у него должна быть скругленная градиентная граница (border-radius: 6px) и полупрозрачный фон.
Способ с родительским блоком или псевдоэлементом не подходит, ибо фон прозрачный, и псевдоэлемент будет "просвечиваться". Вариант с border-image тоже не подойдет, ибо это свойство несовместимо с border-radius.
Есть какой-то другой способ? Может быть с помощью JS?

Answer 1

[Дмитрий Кузнецов]

border radius gradient попробуйте

Comments

[yourfavouritefish]

Если кому интересно, то через -webkit-mask работает только если полностью прозрачный фон нужен.
Через SVG получилось