border-image-width

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since February 2017.

border-image-width は CSS のプロパティで、要素の境界画像の幅を設定します。

試してみましょう

このプロパティの値が要素の border-width よりも大きい場合、境界画像はパディング領域 (またはコンテンツ領域) の縁に向けて拡張されます。

構文

css
/* キーワード値 */
border-image-width: auto;

/* <length> 値 */
border-image-width: 1rem;

/* <percentage> 値 */
border-image-width: 25%;

/* <number> 値 */
border-image-width: 3;

/* 上下 | 左右 */
border-image-width: 2em 3em;

/* 上 | 左右 | 下 */
border-image-width: 5% 15% 10%;

/* 上 | 右 | 下 | 左 */
border-image-width: 5% 2em 10% auto;

/* グローバル値 */
border-image-width: inherit;
border-image-width: initial;
border-image-width: revert;
border-image-width: revert-layer;
border-image-width: unset;

border-image-width プロパティは下記の値のリストにある 1 つから 4 つの値を使用して指定することができます。

  • 値が 1 つ指定された場合、全 4 辺に同じ幅が適用されます。
  • 値が 2 つ指定された場合、1 つ目の幅が上下に、2 つ目が左右に適用されます。
  • 値が 3 つ指定された場合、1 つ目の幅が上に、2 つ目が左右に、3 つ目が下に適用されます。
  • 値が 4 つ指定された場合、幅は上、右、下、左の順 (時計回り) で適用されます。

値

<length-percentage>

境界の幅を、 <length> または <percentage> で指定します。パーセント値は水平オフセットにおいては境界画像の領域の幅、また垂直オフセットにおいては境界画像の領域の高さです。負の値であってはいけません。

<number>

境界の幅を、対応する border-width に対する倍率として指定します。負の値であってはいけません。

auto

境界の幅が、対応する border-image-slice の本質的な幅と高さ (もしあれば) と等しくなるようにします。画像が本質的な寸法を持っていないのであれば、対応する border-width が代わりに使用されます。

公式定義

初期値1
適用対象すべての要素。ただし border-collapse が collapse のときはテーブル要素内部にあるものを除く。 ::first-letter にも適用されます。
継承なし
パーセント値境界画像領域の幅または高さに対する相対値
計算値指定通り。ただし相対的な長さはは絶対的な長さに変換される
アニメーションの種類計算値の型による

形式文法

border-image-width = 
  [ <length-percentage [0,∞]> | <number [0,∞]> | auto ]{1,4}  

<length-percentage> = 
  <length>      |
  <percentage>

例

境界画像のタイリング

この例は以下の 90 × 90 ピクセルの ".png" ファイルを使用して境界画像を作成します。

8 つの円を含む正方形の画像。各コーナーの円は薄紫色。 4 つの辺の円は青。真ん中の 9 つ目の円が入る部分は空白。

そして、元の画像内のそれぞれの円は 30 × 30 ピクセルです。

HTML

html
<p>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
  voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
  kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>

CSS

css
p {
  border: 20px solid;
  border-image: url("border.png") 30 round;
  border-image-width: 16px;
  padding: 40px;
}

結果

仕様書

Specification
CSS Backgrounds and Borders Module Level 3
# the-border-image-width

ブラウザーの互換性

BCD tables only load in the browser

関連情報