border-image-source
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Please take two minutes to fill out our short survey.
試してみましょう
border-image-source: url("/shared-assets/images/examples/border-diamonds.png");
border-image-source: url("/shared-assets/images/examples/border-stars.png");
border-image-source: repeating-linear-gradient(
45deg,
transparent,
#4d9f0c 20px
);
border-image-source: none;
<section id="default-example">
<div id="example-element">This is a box with a border around it.</div>
</section>
#example-element {
width: 80%;
height: 80%;
display: flex;
align-items: center;
justify-content: center;
padding: 50px;
background: #fff3d4;
color: #000;
border: 30px solid;
border-image: url("/shared-assets/images/examples/border-diamonds.png") 30
round;
font-size: 1.2em;
}
元の画像を最終的な境界画像に動的に適用する上で、複数の領域に分割するために border-image-slice
プロパティが使用されます。
構文
css
/* キーワード値 */
border-image-source: none;
/* <image> 値 */
border-image-source: url(image.jpg);
border-image-source: linear-gradient(to top, red, yellow);
/* グローバル値 */
border-image-source: inherit;
border-image-source: initial;
border-image-source: revert;
border-image-source: revert-layer;
border-image-source: unset;
値
none
-
境界画像は使用されません。代わりに
border-style
で定義されたものが表示されます。 <image>
-
境界に使用する画像への参照です。
公式定義
初期値 | none |
---|---|
適用対象 | すべての要素。ただし border-collapse が collapse のときはテーブル要素内部にあるものを除く。 ::first-letter にも適用されます。 |
継承 | なし |
計算値 | none または画像の絶対化した URI |
アニメーションの種類 | 離散値 |
形式文法
border-image-source =
none |
<image>
<image> =
<url> |
<gradient>
<url> =
<url()> |
<src()>
<url()> =
url( <string> <url-modifier>* ) |
<url-token>
<src()> =
src( <string> <url-modifier>* )
例
基本的な例
css
.box {
border-image-source: url("image.png");
}
仕様書
Specification |
---|
CSS Backgrounds and Borders Module Level 3 # the-border-image-source |
ブラウザーの互換性
関連情報
border
outline
box-shadow
background-image
<url>
データ型- Border images in CSS: A key focus area for Interop 2023 (MDN blog, 2023)