overflow-clip-margin

The CSS overflow-clip-margin property determines how far the overflow of an element can go beyond the element’s box before being clipped. This area is called the overflow clip edge.

.element {
  height: 100px;
  overflow: clip; /* required */
  overflow-clip-margin: 20px;
}

Syntax

overflow-clip-margin: <visual-box> || <length [0,∞]>

• <visual-box>: When the specified offset is zero, the visual box specifies the box edge to be used as the overflow clip edge origin. If omitted, the element’s padding-box is used as the default.
• <length [0,∞]>: The offset specifies how far the overflow clip edge is extended from the chosen box edge. If omitted, the value is set to zero. Negative values are invalid.

• Initial: 0px
• Applies to: all elements
• Inherited: no
• Computed value: the computed
• Animation type: discrete

Values

/* <length> values */
overflow-clip-margin: 20px;
overflow-clip-margin: 1rem;
overflow-clip-margin: 2.4em;
overflow-clip-margin: 3ch;

/* <visual-box> value */
overflow-clip-margin: content-box;
overflow-clip-margin: padding-box;
overflow-clip-margin: border-box;

/* Global values */
overflow-clip-margin: inherit;
overflow-clip-margin: initial;
overflow-clip-margin: revert;
overflow-clip-margin: unset;

overflow: clip is required

We’ve gotta talk about the overflow: clip property because it’s required for overflow-clip-margin to do its thing. In short, overflow-clip tells the browser that content that goes beyond the element’s bounds should be hidden—much like declaring

. Where the clip keyword is different in that it forbids all scrolling, whether by the user or programmatically. It’s also worth noting the box itself is does not become a scroll container, and does not start a new formatting context. In other words, no auto-scrollbars or anything when overflow is clipped.

We can clip a single axis

overflow: clip sets clip on both the x-axis (left-right direction) and y-axis (top-bottom direction). But we can isolate those and clip in a single direction, if needed, using overflow-x: clip and overflow-y: clip.

.element {
  overflow-x: clip; /* clip along the x-axis only */
  overflow-clip-margin: 20px;
}

Demo

This works with all forms of content, including images.

Browser support

Nothing but Chrome at the time of this writing.

More information

• CSS Overflow Module Level 3 (CSS Overflow 3)
• MDN documentation

Related