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

mask-border

border-imageと類似した仕組みで、要素の境界線領域に画像によるマスクを適用します。mask-border-source、mask-border-slice、mask-border-width、mask-border-outset、mask-border-repeatの個別プロパティを一括設定できます。装飾的なフレームや不規則な形状のボーダーを実現する際に使用します。

マスクボーダー画像マスク

概要

border-imageと類似した仕組みで、要素の境界線領域に画像によるマスクを適用します。mask-border-source、mask-border-slice、mask-border-width、mask-border-outset、mask-border-repeatの個別プロパティを一括設定できます。装飾的なフレームや不規則な形状のボーダーを実現する際に使用します。

対応ブラウザ

デスクトップ

Chrome 未対応
Edge 未対応
Safari 17.2+
Firefox 未対応

モバイル

Chrome Android 未対応
Safari iOS 17.2+
Firefox Android 未対応

基本構文

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

実務での使いどころ

  • 装飾的なフレームの適用

    画像やカードに不規則な形状のマスクボーダーを適用し、ユニークな装飾フレームを実現します。

注意点

  • 2026年3月時点でSafariのみの対応（プレフィックス付き）です。他のブラウザではサポートされていません。

アクセシビリティ

  • 装飾的なマスクボーダーがコンテンツの視認性を損なわないよう、十分なコントラストを確保してください。

参考リンク