1. ウェブ
  2. CSS
  3. リファレンス
  4. プロパティ
  5. border-image-repeat

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

border-image-repeat

Baseline
広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2016年3月以降、すべてのブラウザーで利用可能です。

border-image-repeat は CSS のプロパティで、境界画像の辺と中央部分の画像がどのように変倍され、タイル状に配置されるかを定義します。中央領域は、border-image-slice プロパティでキーワード "fill" を使用することで、表示させることができます。

試してみましょう

border-image-repeat: stretch;

border-image-repeat: repeat;

border-image-repeat: round;

border-image-repeat: space;

border-image-repeat: round stretch;

<section id="default-example">
  <div id="example-element">これは周囲に境界があるボックスです。</div>
</section>

#example-element {
  width: 80%;
  height: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px;
  background: #fff3d4;
  color: black;
  border: 30px solid;
  border-image: url("/shared-assets/images/examples/border-diamonds.png") 30
    round;
  font-size: 1.2em;
}

構文

css
/* キーワード値 */
border-image-repeat: stretch;
border-image-repeat: repeat;
border-image-repeat: round;
border-image-repeat: space;

/* 垂直 | 水平 */
border-image-repeat: round stretch;

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

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

  • 値が 1 つ指定された場合、全四辺に同じ動作が適用されます。
  • 値が 2 つ指定された場合、1 つ目の動作が上、中、下に、2 つ目が左、右に適用されます。

値

stretch

2 つの境界の間を埋めるために、元画像の辺の領域が引き伸ばされます。

repeat

2 つの境界の間を埋めるために、元画像の辺の領域を (繰り返して) 並べます。寸法を合わせるために領域の一部が切り取られることがあります。

round

2 つの境界の間を埋めるために、元画像の辺の領域を (繰り返して) 並べます。寸法を合わせるために領域が引き延ばされることがあります。

space

2 つの境界の間を埋めるために、元画像の辺の領域を (繰り返して) 並べます。寸法を合わせるために領域間に間隔が置かれることがあります。

公式定義

初期値stretch
適用対象すべての要素。ただし border-collapse が collapse のときはテーブル要素内部にあるものを除く。 ::first-letter にも適用されます。
継承なし
計算値指定通り
アニメーションの種類離散値

形式文法

border-image-repeat = 
  [ stretch | repeat | round | space ]{1,2}
この構文は CSS Borders and Box Decorations Module Level 4 による最新の標準を反映しています。すべてのブラウザーがすべての部分を実装しているわけではありません。サポート情報についてはブラウザーの互換性を参照してください。

例

反復する境界画像

CSS

css
#bordered {
  width: 12rem;
  margin-bottom: 1rem;
  padding: 1rem;
  border: 40px solid;
  border-image: url("border.png") 27;
  border-image-repeat: stretch; /* live sample で変更可能 */
}

結果

仕様書

仕様書
CSS Backgrounds and Borders Module Level 3
# border-image-repeat

ブラウザーの互換性

関連情報

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告