overflow-clip-margin

Overview

The overflow-clip-margin sets the boundaries beyond which an element with overflow: clip may paint before it gets clipped. This outer boundary is referred to as the overflow clip edge of the box.

Examples and Usage

At the time of writing (June 2023), there are some browser support discrepancies, so the usage of overflow-clip-margin comes with a few nuances:

• In Chrome, Edge, and Opera, overflow-clip-margin only works when both axes have overflow: clip.

• Firefox supports overflow-clip-margin, but only with length values, not a visual box.

Here's a basic showcase of how the property can be specified:

.box-example {
  overflow: clip;
  overflow-clip-margin: /* length value */
}

In addition, a potential implementation for Firefox can be explored here. This example showcases how overflow-clip-margin allows you to control the clipping boundary beyond the edge of an element. It's worth noting that this particular example uses the overflow-x: visible; overflow-y: clip; configuration, demonstrating that Firefox can apply overflow-clip-margin even when only one axis is set to clip.

Values

Associated Properties

• clip
• display
• overflow
• overflow-inline
• overflow-x
• overflow-y
• text-overflow
• white-space

Tips and Tricks

• When we mention "painting" in the context of CSS, it refers to the process of rendering pixels to display content on the screen. With overflow-clip-margin, we're controlling how far outside the box's edge this painting can occur before the overflow content gets clipped.

• The term "visual box" is used to refer to various box edges for certain CSS properties, such as transform-box and background-clip. The visual box categories include content-box, padding-box, border-box, which correspond to different parts of an element's box model. For instance, the content-box refers to the area where an element's content is located, the padding-box includes the padding area, and the border-box extends to the outer edge of the border.

• In the context of overflow-clip-margin, these visual box categories determine the edge from which the overflow clip edge starts. By default, if no box category is specified, the property uses the padding box (the area between the content edge and the padding edge of an element) as the starting point.

• When we say "overflow-clip-margin only works when both axes have overflow: clip," it means the property becomes effective only when both horizontal and vertical overflow is set to clip. This applies whether overflow: clip is set as a shorthand (affecting both axes) or individually using overflow-x and overflow-y. If either overflow-x or overflow-y is not set to clip, then overflow-clip-margin will not impact the rendering. In Firefox, however, the property still takes effect even if only one axis is set to clip, as shown in the example mentioned above.

• Remember that overflow-clip-margin only applies when the overflow property is set to clip. It doesn't affect other overflow conditions such as scroll or hidden. This applies whether overflow: clip is set as a shorthand (affecting both axes) or individually using overflow-x and overflow-y.

• The <length> value, a non-negative number in overflow-clip-margin, defines how much the overflow clip edge is expanded from the specified box edge. This gives us the flexibility to decide how much overflow content is visible beyond the edge of the box.

Browser Compatibility

For a detailed breakdown of partial support nuances in specific browser versions, refer to the first link in the Useful Resources below.

Caution: Internet Explorer support data may be incorrect since MDN browser-compat-data no longer updates it. Also, early Edge versions used EdgeHTML, leading to mismatched version numbers. From version 79, Edge uses Chromium with matching version numbers.

Useful Resources

Can I use: overflow-clip-margin

W3C's Editor's Draft of CSS Overflow Module Level 3: overflow-clip-margin

W3C's Working Draft of CSS Overflow Module Level 3: overflow-clip-margin