Widely availableSupported across all major browsers. Safe to use in production.
Syntax and cascade Widely available

overflow: clip

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.

Syntax and cascade

Overview

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.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.properties.overflow-x.clip
90
90
81
16
90
16
CSS property
clip
90
90
81
16
90
16
clip
90
90
81
16
90
16
CSS type
clip
90
90
81
16
90
16
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (81)
Implementation note
  • Previously available under a different name: -moz-hidden-unscrollable (3.5)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (81)
Implementation note
  • Previously available under a different name: -moz-hidden-unscrollable (3.5)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (81)
Implementation note
  • Previously available under a different name: -moz-hidden-unscrollable (1.5)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (81)
Implementation note
  • Previously available under a different name: -moz-hidden-unscrollable (1.5)

Syntax

CSS 
/* Pure clipping */
.clipped {
  overflow: clip;
}

/* Clipping in one direction only */
.horizontal-clip {
  overflow-x: clip;
  overflow-y: visible;
}

Live demo

overflow: clip

overflow: clip Overflow: clip demo.

PreviewFullscreen

overflow-x: clip only

overflow: clip overflow-x: clip only demo.

PreviewFullscreen

Hidden and. Comparison

overflow: clip Hidden and. comparison demo.

PreviewFullscreen

Use cases

  • Using overflow: clip

    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.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links

Powered by web-features