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を指定しています。

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

関連記事

2024.09.21

HTML・CSS

mask-imageを利用したSVGの画像切り抜き

CSSのmask-imageプロパティを利用して、SVGで画像を切り抜きます。デモページはこちら まず、以下をmask.svgとして保存します。 共通のCSSは…

2020.09.14

HTML・CSS

metaタグのformat-detectionで自動リンクを無効化

デモページはこちら metaタグのformat-detectionを設定して、スマホのブラウザで電話番号、メールアドレス、住所の表記がリンクに自動変換されるのを…

2023.02.22

HTML・CSS

縦積みinline-flexの折り返しとwriting-modeによる代用

inline-flexで縦積みにした場合の折り返しと、writing-modeで縦積みにした場合の折り返しを確認します。デモページはこちら htmlは以下の単純…

2021.07.06

HTML・CSS

background-imageプロパティを利用した高さ可変の三角形

borderプロパティで三角形を作成した場合、高さを可変にすることができません。そこで、background-imageプロパティのlinear-gradien…

2020.10.16

HTML・CSS

flexboxでCSSのwidthプロパティにcalcを利用

769px以上:4カラム・768px以下:3カラム flexboxでCSSのwidthプロパティにcalcを利用します。以下のhtml構造でテストします。デモペ…

上に戻る