borderにgradientを適用させる方法

もち

border の色をカラフルにする方法を

お伝えします！

See the Pen Untitled by mothihuku (@mothi002) on CodePen.

↓の二つを指定するとカラフルになります。

border: 10px solid; (色はあってもなくても、どちらでも。border-image で上書きされるので。)

border-image: linear-gradient(to right, red 0%, orange 100%) 10; (この 10 は正直 0 以外ならちゃんと線が描画されます。ただ一応、10px にあわせて 10 にしてます。)

もち

詳しくはこちらのサイトをどうぞ！

border-image - CSS: カスケーディングスタイルシート | MDN

border-image は CSS のプロパティで、指定された要素の周りに画像を描きます。これは要素の通常の境界を置き換えます。

developer.mozilla.org

もち

今回はここまでです。

ありがとうございました！