border-image CSS プロパティとは
トピック：境界線スタイル(border-style)の代わりにイメージをどのように使用するかを指定する ことができる border-image-source、border-image-slice、border-image-width、border-image-outsetおよびborder-image-repeatプロパティを一度に設定するための省略表現のプロパティです。
プロパティ border-image
実例 コード 1
サンプル コードを試す #webref{
border-image: url("../webref.jpg") 30 round;
}
プロパティ 定義と使用法
| デフォルト値・初期値 : | 以下の一括指定の各プロパティとして
|
|---|
| 適用対象 : | 全要素。ただし border-collapse が collapse のときはテーブル要素内部にあるものを除く。 ::first-letter にも適用される |
|---|
| 継承 : | 不可 |
|---|
| パーセンテージ : | 以下の一括指定の各プロパティとして
|
|---|
| メディア : | visual |
|---|
CSS Version | CSS3 |
|---|
| 計算値 : | 以下の一括指定の各プロパティとして
|
|---|
| JavaScript 構文 | object.style.borderImage="url("../webref.jpg") 30 round" |
|---|
| アニメーションの種類 : | 個別 |
|---|
| 正規順序 : | 形式文法で定義される一意のあいまいでない順序 |
|---|
| CSSの構文 | border-image: source, slice, width, outset, repeat |initial |inherit; |
|---|
プロパティ値
サポートするデスクトップ ブラウザ対応・互換性
| Property | Desktop 互換性 |
|---|
| border-image | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|
| 基本 サポート | フルサポート◯16 | フルサポート◯12 | フルサポート◯15 | フルサポート◯11 | フルサポート◯10.5 | フルサポート◯6 |
|---|
オプション
<border-image-slice> | 不明 | 不明 | フルサポート◯15 | 不明 | 不明 | 不明 |
|---|
fill キーワード | フルサポート◯あり | 不明 | フルサポート◯15 | 不明 | 不明 | フルサポート◯6 |
|---|
<gradient> | フルサポート◯あり | 不明 | フルサポート◯29 | フルサポート◯あり | フルサポート◯あり | フルサポート◯あり |
|---|
サポートするモバイル ブラウザ対応・互換性
| Property | Mobile 互換性 |
|---|
| border-image | Android | Chrome for Android
| Edge Mobile | Firefox for Android
| Opera for Android
| iOS Safari | Samsung Internet |
|---|
| 基本 サポート | フルサポート◯2.1 | 不明 | フルサポート◯あり | フルサポート◯15 | フルサポート◯11 | フルサポート◯6 | 不明 |
|---|
オプション
<border-image-slice> | 不明 | 不明 | 不明 | フルサポート◯15 | 不明 | 不明 | 不明 |
|---|
fill キーワード | フルサポート◯18 | 不明 | 不明 | フルサポート◯15 | 不明 | フルサポート◯6 | 不明 |
|---|
<gradient> | フルサポート◯あり | 不明 | 不明 | フルサポート◯29 | フルサポート◯あり | フルサポート◯あり | 不明 |
|---|
CSS border-image | CSS プロパティ 値| 意味 使い方 実例 – WebRef