border-image-outsetプロパティ

値

パターン1

指定した値が1つの場合、全ての辺に対して適用します。要素の背景色である青が本来のサイズです。

次の例の場合、全ての辺を20pxずつ広げています。

CSSコード例

border-width: 20px;
border-style: dashed;
border-image-source: url(https://gray-code.com/wp-content/uploads/2016/07/border-dot-sample.png);
border-image-slice: 20%;
border-image-outset: 20px;

表示例：

パターン2

値が2つの場合、1つ目の値は上下の辺に対して適用し、2つ目の値は左右の辺に対して適用します。

次の例では、上下の辺のボーダーを外に20px広げ、左右の辺は0pxを指定しています。

CSSコード例

border: 20px dashed gray;
border-image-source: url(https://gray-code.com/wp-content/uploads/2016/07/border-dot-sample.png);
border-image-slice: 20%;
border-image-outset: 20px 0px;
border-image-repeat: repeat;

表示例：

パターン3

値を3つ指定すると、1つ目の値は上の辺に、2つ目の値は左右の辺に、3つ目の値は下の辺に適用されます。

次の例では上の辺のボーダーを20px、下の辺のボーダーを10px広げ、左右の辺は広げない設定を指定しています。

CSSコード例

border: 20px dashed gray;
border-image-source: url(https://gray-code.com/wp-content/uploads/2016/07/border-dot-sample.png);
border-image-slice: 20%;
border-image-outset: 20px 0px 10px;
border-image-repeat: repeat;

表示例：

パターン4

値を4つ指定した場合、左から順に上辺のボーダー、右辺のボーダー、下辺のボーダー、左辺のボーダーに対して指定することができます。

次の例では上辺のボーダーを20px広げ、右辺のボーダーを0px、下辺のボーダーを30px広げ、左辺のボーダーを30px広げる指定を行っています。

CSSコード例

border: 20px dashed gray;
border-image-source: url(https://gray-code.com/wp-content/uploads/2016/07/border-dot-sample.png);
border-image-slice: 20%;
border-image-outset: 20px 0 30px 30px;
border-image-repeat: repeat;

表示例：

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。