如何实现带超椭圆圆角的矩形并解决内容适配与拉伸异常问题？

我需要一个带有**超椭圆（superellipse）**圆角的矩形，内部可以容纳不同高度的文本。

我找到了一种用CSS Houdini创建平滑圆角的方法，但不知道怎么将其修改为非正方形样式，也不清楚如何在内部添加内容。

现有实现代码 #

JavaScript

if (CSS && 'paintWorklet' in CSS) CSS.paintWorklet.addModule('https://unpkg.com/smooth-corners')

CSS

.superellipse {
  display: inline-block;
  margin: 20px;
  height: 150px;
  width: 150px;
  mask-image: paint(smooth-corners);
  -webkit-mask-image: paint(smooth-corners);
  background: linear-gradient(to bottom right, deeppink, orangered);
}

HTML

<div class="superellipse" style="--smooth-corners: 4"></div>

但当我尝试拉伸这个元素（改变宽高比例）时，超椭圆圆角的效果完全失效了：

内容的提问来源于stack exchange，提问作者sunnyexe