【CSS】border-imageプロパティについて

  • 投稿日
  • 著者 くまだ
  • カテゴリー Web制作

どうも、くまだです。

CSSのborder-imageプロパティについてのあれこれ。

border-imageプロパティ

border-imageプロパティは要素の枠線に画像を表示させるプロパティです。

以下のようなコードになります。

border-image-sourceプロパティに表示させたい画像のパスを記述すると、枠線に画像が表示されます。border-imageプロパティは、borderプロパティでの指定が必要なので、併せて記述します。

<div class="box">
 <p>ああああ</p>
</div>

.box {
    border: solid 100px;
    border-image-source: url(sample.png);
}

border-image-sliceプロパティは、画像を9つの領域に分割することができます。

.box {
    border: solid 100px;
    border-image-source: url(sample.png);
    border-image-slice: 1000;
}

fillを使うと、背景画像のように表示できます。

border-image-slice: 1000 fill;

border-image-widthプロパティは、画像が表示される幅を指定できます。

.box {
    border: solid 100px;
    border-image-source: url(sample.png);
    border-image-slice: 1000 fill;
    border-image-width: 50px;
}

border-image-outsetプロパティは、画像を枠線からはみ出す幅を指定できます。

.box {
    border: solid 100px;
    border-image-source: url(sample.png);
    border-image-slice: 1000 fill;
    border-image-width: 50px;
    padding: 100px;
    border-image-outset:30px;
}

緑色がパディングの領域、黄色が枠線の領域で、外側にはみ出ている画像の領域がborder-image-outsetによるものです。

border-image-repeatプロパティは、枠線の画像を引き延ばしたり繰り返したりなどの表示方法の指定ができます。

.box {
    border: solid 100px;
    border-image-source: url(sample.png);
    border-image-slice: 1000 fill;
    border-image-width: 50px;
    padding: 100px;
    border-image-outset:30px;
    border-image-repeat:round;
}

border-image-repeatプロパティは、以下の値を指定できます。

  • stretch：初期値。画像が引き伸ばされて領域を埋める。
  • repeat：画像がタイル状に繰り返し表示。
  • round：画像がタイル状に繰り返し表示し、画像が拡大・縮小。
  • space：画像がタイル状に繰り返し表示し、余ったスペースは分配。

border-imageプロパティで一括に書くこともできます。

.box {
    border: solid 100px;
    border-image-source: url(sample.png);
    border-image-slice: 1000 fill;
    border-image-width: 50px;
    padding: 100px;
    border-image-outset:30px;
    border-image-repeat:round;

    /* 一括で書く場合 */
    border-image: url(sample.png) 1000 fill / 50px 30px round;
}

ここまで読んでくださりありがとうございました。

CSS

この記事を書いた人

くまだ

記事一覧