如何在左右边框上放置两个线性渐变？

Question

我正在寻找一个左右边框宽的黄色div。朝着div的外边缘，左右边框的颜色逐渐变细到白色，以模拟透明度。

到目前为止，我已经能够构建div了，但不是渐变：

.fade {
  margin: 2em 2em; padding-top: 2em; padding-bottom: 2em;
  background: rgb(242,242,194);

  border-right: 3em black solid;
  border-left: 3em black solid;
  border-image: linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(242, 242, 194) 100%);
{

<div class="fade">Text</div>

上面可以看到：线性渐变正确地覆盖黑色以形成黄色边框，但是我正在寻找没有白色的淡化。事实上，根本没有梯度。

最终产品应如下所示：

我哪里错了？