CSS - border-image-width

概要

属性名	border-image-width
値	[<length> \| <percentage> \| <number> \| auto ]{1,4}
初期値	1
適用可能要素	border-collapse が collapse と設定されたテーブル以外のすべての要素
継承	継承しない
メディア	visual
アニメーション	不可 (Chrome や Opera では可能)

サポート (説明)

CSS	IE/Edge	Firefox	Chrome	Opera	Safari
CSS3	11	15	16	15	6

説明

ボーダーイメージの元画像のスライス方法を指定します。

値	説明
<length>	ボーダーの太さを、長さで指定します。
<percentage>	ボーダーの太さを、画像の横幅・高さに対するパーセンテージで指定します。
<number>	ボーダーの太さを、border-width に対する倍数 (例:1.5) で指定します。
auto	border-image-slice と同じ値となります。画像が、要求される寸法を持たない場合は、border-width と同じ値となります。

border-image-width に値を4つ指定した場合、top, right, bottom, left を指定したとみなされます。left を省略すると right と同じ値になります。bottom を省略すると top と同じ値になります。right を省略すると top と同じ値になります。

文法

border-image-width: <top> <right> <bottom> <left>
border-image-width: <top> <right_left> <bottom>
border-image-width: <top_bottom> <right_left>
border-image-width: <top__right_bottom_left>

使用例

CSS

#d1 {
  width: 120px;
  height: 60px;
  border-image-source: url(./image/border.png);
  border-image-slice: 10;
  border-image-width: 10px;
  border-image-repeat: round;
  border-style: solid;
}

HTML

<div id="d1"></div>

表示

リンク

初版：2015年10月11日、最終更新：2018年1月7日

https://www.tohoho-web.com/css/prop/border-image-width.htm

CSS - border-image-width

概要

サポート (説明)

説明

使用例

関連項目

リンク