枠線にグラデーションをかけときに気づいたこと。

4方向

特に問題はなし。

.border-gradation	{
	border-image: linear-gradient(to right, #EECC2D 0%, #CA5097 100%);
	border-image-slice: 1;
	border-image-width: 0.2em;
}

一部のみ

.border-bottom-gradation	{
	border-bottom: solid;
	border-image: linear-gradient(to right, #EECC2D 0%, #CA5097 100%);
	border-image-slice: 1;
	border-image-width: 0 0 0.2em 0;
}

下のみにつける例。

デスクトップのクロームのみ、「border-bottom: solid」を付けないとボーダーが現れません。

ほかのブラウザでは無視されるっぽいので、これで対応。

「border: solid」とすると、上、右、左に透明なボーダーが付きます。見た目、paddingが付いている感じになるので注意。