Limited supportUse with care and confirm browser support before shipping it to all users.
Syntax and cascade Limited support

overflow-clip-margin

The overflow-clip-margin CSS property sets how far overflow content may appear outside the bounds of an element before it's clipped by effects such as overflow: clip. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.

Syntax and cascadeScrollingLayout

Overview

The overflow-clip-margin CSS property sets how far overflow content may appear outside the bounds of an element before it's clipped by effects such as overflow: clip. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.

Browser support

Feature Desktop Mobile
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+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Only works when both axes are using `overflow: clip`. See bug 40235584.
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Only works when both axes are using `overflow: clip`. See bug 40235584.
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Only works when both axes are using `overflow: clip`. See bug 40235584.

Syntax

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

Live demo

clip-margin: 20px

CSS Clip-margin: 20px demo.

PreviewFullscreen

clip-margin: 0

CSS Clip-margin: 0 demo.

PreviewFullscreen

overflow: hidden

CSS Overflow: hidden demo.

PreviewFullscreen

Use cases

  • Use overflow-clip-margin

    Use overflow-clip-margin when the default CSS behavior is not expressive enough for the component or layout you are building.

  • Handle edge cases

    Apply overflow-clip-margin to solve a specific styling constraint without introducing broader layout or behavior changes.

Cautions

  • Test overflow-clip-margin in the browsers you support, especially if it changes layout, text handling, or interaction behavior.
  • Plan a fallback or acceptable degradation path when support is still limited.

Accessibility

  • Confirm that using overflow-clip-margin does not make content harder to perceive, understand, or operate in assistive contexts.

Related links

Powered by web-features