borderに画像やグラデーションを指定できるborder-imageを使ってみます。
対応ブラウザ
border-imageの対応ブラウザはこちら
IE11から対応していますが、border-styleを上書きするバグやborder-image-repeat: spaceをサポートしていないブラウザなどがあるので注意が必要です。
サンプルコード
border-imageは1枚の画像を9分割して、4つの角と辺に使用されます。
今回は以下のようなサイズの画像を用意しました。
実際の画像はこちらです。
HTML
<div class="sample"></div>
CSS
.sample { width: 160px; height: 110px; border-width: 32px; border-style: solid; border-image-source: url(border.png); border-image-slice: 22 32; border-image-width: 22px 32px; border-image-outset: 0; border-image-repeat: repeat; }
border-image-source | ボーダーに使用する画像やグラデーションを指定。 |
---|---|
border-image-slice | border-image-sourceの切り分ける位置を指定。 値は数値またはパーセント値で指定。 4つの値を指定した場合はtop,right,bottom,leftに、3つの場合はtop,leftとright,bottomに、2つの場合はtopとbottom,leftとrightに、1つの場合は4つに同じ値が設定される。 中央部分はfillを指定した場合のみ使用される。 |
border-image-width | border-imageの幅を指定。 |
border-image-outset | border-imageの領域を外側に広げる際に指定。 |
border-image-repeat | border-imageの4辺の繰り返し方法を指定。 stretch: 領域のサイズに合わせて画像を引き延ばす。 repeat: 領域のサイズ内で画像を繰り返す。 round: 領域のサイズ内で画像を繰り返す。整数回の繰り返しでちょうど埋まらない場合は、ちょうど埋まるようにサイズを調整。 |
border-imageプロパティでまとめて指定することもできます。
CSS
.sample { width: 160px; height: 110px; border-width: 32px; border-style: solid; border-image: url(border.png) 22 32 / 22px 32px repeat; }
「border-image-sourceの値 border-image-sliceの値 / border-image-widthの値 / border-image-outsetの値 border-image-repeatの値」の順番で指定します。
border-imageのデモページ2
【参考サイト】
- border-image-source – CSS | MDN
- border-image-slice – CSS | MDN
- border-image-width – CSS | MDN
- border-image-outset – CSS | MDN
- border-image-repeat – CSS | MDN
- border-image – CSS | MDN
コメントが承認されるまで時間がかかります。