overflow-clip-margin
The overflow-clip-margin CSS property determines how far outside its bounds an element with overflow: clip may be painted before being clipped. The bound defined by this property is called the overflow clip edge of the box.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 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
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.