overflow: clipBaseline · Widely available
The overflow: clip CSS declaration clips an element's overflowing content to the box that's defined by the overflow-clip-margin property. Unlike overflow: hidden, it allows you to hide overflow on one axis while keeping overflow on the other axis visible.
Supported in all major browsers for at least 30 months — safe to use without fallbacks. Baseline since Sep 12, 2022. Widely available since Mar 12, 2025.
Browser support
DesktopChrome
1–89Not supported
90+Supportedsince Apr 13, 2021
Current: 155Edge
12–89Not supported
90+Supportedsince Apr 15, 2021
Current: 154Firefox
1–80Not supported
81+Supportedsince Sep 22, 2020
Current: 157Safari
1–15.6Not supported
16+Supportedsince Sep 12, 2022
Current: 27MobileChrome Android
18–89Not supported
90+Supportedsince Apr 13, 2021
Current: 155Firefox Android
4–80Not supported
81+Supportedsince Sep 22, 2020
Current: 157Safari iOS
1–15.6Not supported
16+Supportedsince Sep 12, 2022
Current: 27How to use
This feature is Baseline widely available — use it freely, no fallback needed.
Example
Full syntax and examples are on MDN — see the links below.
Feature detection
CSS · check before using
@supports (overflow-x: clip) {
/* styles that rely on overflow-x: clip */
}
/* or in JavaScript */
if (CSS.supports("overflow-x", "clip")) {
// use it
}Specification
Sub-features
Support for each part of the feature (4). The overall table above shows when the whole feature works.
| Sub-feature | Chrome | Edge | Firefox | Safari | Chrome Android | Firefox Android | Safari iOS |
|---|---|---|---|---|---|---|---|
| overflow-x.clip | 90 | 90 | 81 | 16 | 90 | 81 | 16 |
| overflow-y.clip | 90 | 90 | 81 | 16 | 90 | 81 | 16 |
| overflow.clip | 90 | 90 | 81 | 16 | 90 | 81 | 16 |
| <overflow>.clip | 90 | 90 | 81 | 16 | 90 | 81 | 16 |