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

overflow-clip-margin

overflow-clip-margin は CSS のプロパティで、 overflow: clip を持つ要素がクリップされる前に、要素の辺からどれだけ外側に描画できるかを指定します。 このプロパティで定義される境界は、ボックスのオーバーフロークリップ枠と呼ばれます。

オーバーフロークリッピング

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
overflow-clip-margin
90
90
102
90
border-box
104
104
148
104
content-box
104
104
148
104
padding-box
104
104
148
104
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 2件
制限事項
  • このブラウザでは部分的にしか実装されていません
実装メモ
  • 両方の軸が `overflow:clip` を使用している場合にのみ機能します。 バグ 40235584 を参照してください。
注釈 2件
制限事項
  • このブラウザでは部分的にしか実装されていません
実装メモ
  • 両方の軸が `overflow:clip` を使用している場合にのみ機能します。 バグ 40235584 を参照してください。
注釈 2件
制限事項
  • このブラウザでは部分的にしか実装されていません
実装メモ
  • 両方の軸が `overflow:clip` を使用している場合にのみ機能します。 バグ 40235584 を参照してください。

基本構文

CSS 
.box {
  overflow: clip;
  overflow-clip-margin: 20px;
}

ライブデモ

clip-margin: 20px

CSS Clip-margin: 20px demo.

プレビュー全画面表示

clip-margin: 0

CSS Clip-margin: 0 demo.

プレビュー全画面表示

overflow: hidden

CSS Overflow: hidden demo.

プレビュー全画面表示

実務での使いどころ

  • 装飾のはみ出し許容

    ボックスシャドウやドロップシャドウなど、要素の境界をわずかに超える装飾効果をクリップせずに表示できます。

注意点

  • overflow: clip以外のoverflow値と組み合わせても効果がないため、必ずoverflow: clipと併用してください。

アクセシビリティ

  • クリップされたコンテンツがスクリーンリーダーで読み上げられる場合があるため、重要な情報がクリップ領域外に隠れないよう注意してください。

参考リンク