CSS - border-image-outset

トップ > CSSリファレンス > border-image-outset

概要

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

サポート (説明)

CSSIE/EdgeFirefoxChromeOperaSafari
CSS3111516156

説明

ボーダーイメージを、ボーダーボックスを超えて広げる量を指定します。

説明
<length>広げる量を、長さで指定します。
<number>広げる量を、border-width に対する割合 (例:1.5) で指定します。

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

文法
border-image-outset: <top> <right> <bottom> <left>
border-image-outset: <top> <right_left> <bottom>
border-image-outset: <top_bottom> <right_left>
border-image-outset: <top__right_bottom_left>

詳細は border-image を参照してください。

使用例

CSS
#d1 {
  width: 120px;
  height: 60px;
  border: 10px solid transparent;
  border-image-source: url(./image/border.png);
  border-image-slice: 10;
  border-image-width: 10px;
  border-image-repeat: round;
  border-style: solid;
}
#d2 {
  width: 120px;
  height: 60px;
  border: 10px solid transparent;
  border-image-source: url(./image/border.png);
  border-image-slice: 10;
  border-image-width: 10px;
  border-image-repeat: round;
  border-image-outset: 1;
  border-style: solid;
}
HTML
<div id="d1"></div>
<div id="d2"></div>
表示

関連項目

border-image, border-image-source, border-image-slice, border-image-width, border-image-repeat

リンク


Copyright (C) 2015-2018 杜甫々
初版:2015年10月11日、最終更新:2018年1月7日
http://www.tohoho-web.com/css/prop/border-image-outset.htm