Прямоугольник с углами суперэллипса CSS ⇐ CSS

[Гость]

изображение прямоугольника с мягкими углами

Мне нужен прямоугольник с углами суперэллипса и текстом разной высоты внутри.

Я нашел способ создать мягкие углы, но не знаю, как сделать его не квадратным и поместить внутрь контент.

if (CSS && 'paintWorklet' в CSS) CSS.paintWorklet.addModule('https://unpkg.com/smooth-corners' ) .superellipse { отображение: встроенный блок; поле: 20 пикселей; высота: 150 пикселей; ширина: 150 пикселей; маска-изображение: краска (сглаживание углов); -webkit-mask-image: краска (сглаживание углов); фон: линейный градиент (справа внизу, темно-розовый, оранжево-красный);

Но когда пытаешься его растянуть, все ломается

изображение того, что я получаю