Tbpgr Blog

Employee Experience Engineer tbpgr(てぃーびー) のブログ

CSS3新要素 | 背景・ボーダー | border-image

概要

css3の枠線に画像を指定するborder-imageについて説明します

プロパティ名

border-image

内容

枠線に画像を指定します

設定値

設定値名 設定値内容
border-image-source ボーダーに使用する画像
border-image-slice 画像の端から内側へスライスする距離
border-image-width 画像ボーダーの太さ
border-image-repeat 画像の繰り返しパターン

サンプル

<!DOCTYPE HTML>
<html lang="ja-JP">
  <head>
    <meta charset="UTF-8" />
    <title>border-image</title>
    <style type="text/css">
    p {
      border-style:dashed;
      border-width:30px;
      border-color:#000;
      width:300px;
      height:100px;
      padding:10px;
    }
    p#contents1 {
      border-image:url("border-image.png") round;
    }
    p#contents2 {
      border-image:url("border-image.png") stretch;
    }
    </style>
  </head>
  <body>
    <p id="contents1">round</p>
    <p id="contents2">stretch</p>
    <hr />
    以下、背景画像
    <img src="border-image.png" alt="" width="" height="" />
  </body>
</html>

完成画面のキャプチャ