mask-border | Frontend Practical Guide

Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`mask-border`	1	79		17.2	18	17.2
その他
`css.properties.mask-border-outset` mask-border-outset は CSS のプロパティで、要素のマスク境界の境界ボックスからの距離を指定します。	1	79		17.2	18	17.2
`css.properties.mask-border-repeat` mask-border-repeat は CSS のプロパティで、マスク境界画像の辺と中央部分の変倍およびタイル表示の方法を指定します。	1	79		17.2	18	17.2
`css.properties.mask-border-slice` mask-border-slice は CSS のプロパティで、mask-border-source で設定された画像を複数の領域に分割します。これらの領域は要素のマスク境界の部品を構成するために使用されます。	1	79		17.2	18	17.2
`css.properties.mask-border-source` mask-border-source は CSS のプロパティで、要素のマスク境界を生成するのに使われる元の画像を設定します。	1	79		17.2	18	17.2
`css.properties.mask-border-width` mask-border-width は CSS のプロパティで、要素のマスク境界の幅を設定します。	1	79		17.2	18	17.2

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

CSS

.frame {
  mask-border-source: url('border-mask.svg');
  mask-border-slice: 30;
  mask-border-width: 20px;
  mask-border-repeat: round;
}

CSS Gradientframe demo.

CSS wavy linepattern demo.

CSS dtframe demo.