2025.08.05

HTML・CSS

border-imageを利用したグラデーションのボーダー

CSSのborder-imageプロパティを利用して、グラデーションのボーダーを作成します。
デモページはこちら

border-imageはborder-image-source、border-image-slice、border-image-width、border-image-outsetの各プロパティをショートハンドで指定できます。

グラデーションのボーダーを作成する場合は、borderプロパティでボーダーの幅とスタイルのみ指定しておきます。色を指定する必要はありません。

あとはborder-imageでborder-image-sourceとborder-image-sliceのみ指定すれば表示できます。border-image-sourceにはグラデーションを、border-image-sliceには1を指定します。

border-image-widthはボーダーの幅を指定するプロパティですが、省略した場合はborderプロパティの指定が適用されます。

.text01 {
  border: 6px solid;
  border-image: linear-gradient(-45deg, #AA8115 0%, #EBC767 50%, #AA8115 100%) 1;
}

以下のようにプロパティを分けて記述しても同じ結果になります。

.text01 {
  border: 6px solid;
  border-image-source: linear-gradient(-45deg, #AA8115 0%, #EBC767 50%, #AA8115 100%);
  border-image-slice: 1;
}

border-image-sliceはボーダーに表示したい画像を9分割にする際の、スライスの距離を指定するプロパティです。単位は省略して指定しますが、1なら1px、100なら100pxとなります。

今回は画像ではなくグラデーションなので、0以外の整数であれば問題ありません。便宜上1を指定しています。

なお、この方法でグラデーションのボーダーを角丸にすることはできません。

関連記事

2025.08.12

HTML・CSS

background-clipを利用したグラデーションのテキスト

background-clip: textを利用してグラデーションのテキストを表示します。デモページはこちら 以下のhtml構造で確認します。グラデーションのテ…

2023.02.18

HTML・CSS

異なる親要素を持つ子要素の重なり

異なる親要素を持つ子要素の重なりを、positionプロパティとz-indexプロパティを指定して確認します。デモページはこちら 以下のhtml構造で確認します…

2024.09.10

HTML・CSS

backdrop-filter: blurとfilter: blurの違い

backdrop-filterプロパティのblurとfilterプロパティのblurを比較して違いを確認します。デモページはこちら 共通のCSSは以下になります…

2021.01.30

HTML・CSS

CSS疑似要素のcontentプロパティにcounter関数で連番を指定

デモページはこちら CSS疑似要素のcontentプロパティに、CSSのcounter関数で連番を指定します。JavaScriptは使用せず、CSSのみで実装し…

2020.10.19

HTML・CSS

コーディング時のIE11のバグ

コーディング時に発生したIE11のバグのまとめです。主にflexboxで発生します。 ■ display: flexの要素にmin-heightを指定した場合、…

上に戻る