border-image と border-radius （擬似的な）一緒に使い方

この文はグラデーション枠線を要素に付けることを例にとると、border-image と border-radius の一緒に使い方をご紹介します。（border-image と　border-radius　の対立を解決することではなく、擬似的なことです。）

問題点

要素にグラデーション枠線を付ける方法は：

div {
  border-image: linear-gradient(red, yellow) 5;
  border-width: 5px;
  border-style: solid;
}

これは簡単ですが、角丸が作れませんでした。

div {
  border-image: linear-gradient(red, yellow) 5;
  border-radius: 5px; // 無効
  border-width: 5px;
  border-style: solid;
}

TL;DR

mask を一緒に使ったらできます。

div {
  border-image: linear-gradient(red, yellow) 5;
  border-radius: 5px;
  border-width: 5px;
  border-style: solid;
  
  mask: linear-gradient(black, black);
}

擬似要素・ラッピング要素を使う解決策

一般的な解決策は擬似要素やラッピング要素を使うのでしょう。

div {
  position: relative;
  border: 5px solid transparent;
  background: white;
  background-clip: padding-box;
}
div::before {
  content: '';
  border-radius: 5px;
  background-image: linear-gradient(red, yellow);
  position: absolute;
  margin: -5px;
  inset: 0;
  z-index: -1;
}

その原理は擬似要素（div::before）はグラデーション背景で、元の要素（div）は白背景なので、透明のように見えます。

擬似要素・ラッピング要素を使わない解決策

使いたくないなら、二つ背景画像を使ってもできます。

div {
  border-radius: 5px;
  background-image: linear-gradient(white, white), linear-gradient(red, yellow);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border: 5px solid transparent;
}

同じコンセプトです。

しかし、これらの二つ解決策は背景を確定しなければいけません。

mask を使う解決策

コードを元に戻して、mask プロパティを加えます。

div {
  border-image: linear-gradient(red, yellow) 5;
  border-radius: 5px;
  border-width: 5px;
  border-style: solid;
  
  mask: linear-gradient(black, black);
}

mask というプロパティは、提供した画像を基にして、一部要素を隠します。border-image は border-radius に影響を受けない一方、mask は影響を受けるため、角丸の外側が消えました。

オーバーフロー部が見えるようにしたい場合、擬似要素を使ってもできます。

div {
  position: relative;
  padding: 5px;
}
div::before {
  content: '';
  position: absolute;
  margin: -5px;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  
  border-image: linear-gradient(red, yellow) 5;
  border-radius: 5px;
  border-width: 5px;
  border-style: solid;
  
  mask: linear-gradient(black, black);
}

終わりに

mask は 2010 年頃から導入されていますが、この解決策はほとんど紹介されていません。この方法が他と異なる点は、背景が透けて見えると思います。デメリットについてが知っている方がいれば、是非教えていただけますか。