overflow-clip-margin Visual Demo

overflow-clip-margin is a CSS property that extends the clipping boundary of an element when overflow: clip is set. By default, overflow: clip clips content exactly at the element's padding edge. With overflow-clip-margin, you can specify a distance (e.g., 20px) beyond the padding edge where content remains visible before being clipped. This allows decorative elements, badges, or tooltips to extend slightly outside their container without being cut off. Important: It only works with overflow: clip, not overflow: hidden.

There are three key differences:

• Scrollability: overflow: hidden still allows programmatic scrolling via JavaScript (e.g., scrollTop), while overflow: clip completely disables all scrolling — the content is truly fixed.
• Formatting context: overflow: hidden creates a new block formatting context (BFC), which can affect float containment and margin collapsing. overflow: clip does not create a BFC.
• Clip margin: Only overflow: clip respects the overflow-clip-margin property. overflow: hidden ignores it entirely.

Common real-world use cases include:

• Notification badges: Allow a badge to extend beyond a card or avatar container without being clipped.
• Decorative elements: Let background ornaments, glow effects, or ambient shapes overflow their container gracefully.
• Tooltips & popovers: Enable tooltips positioned at container edges to remain visible.
• Focus rings: Ensure :focus-visible outlines aren't clipped by the parent container.
• Drop shadows: Allow box-shadows or filter dropshadows to extend beyond the clipping boundary.

The default value is 0px (content clips exactly at the padding edge). The full syntax is:

/* Single value - applies to all sides */
overflow-clip-margin: 20px;

/* With visual box reference */
overflow-clip-margin: content-box 20px;
overflow-clip-margin: padding-box 20px; /* default */

The property accepts any non-negative <length> value. The optional visual box keyword (content-box or padding-box) specifies which edge the margin is measured from. padding-box is the default.

Browser support is now widespread among modern browsers:

• Chrome: 90+ (April 2021)
• Edge: 90+ (April 2021)
• Firefox: 81+ (September 2020)
• Safari: 16+ (September 2022)
• Opera: 76+
• Samsung Internet: 15+

For older browsers, the property is simply ignored, and overflow: clip behaves like regular clipping at the padding edge. Consider providing a fallback design that doesn't rely on extended clipping for unsupported browsers.

overflow-clip-margin affects only visual clipping — it does not change the element's layout box, size, or position in the document flow. The element maintains its original dimensions for layout purposes. Content that falls within the clip-margin area is visually rendered but does not affect sibling elements, parent dimensions, or scrollable overflow calculations. This makes it safe to use without worrying about layout shifts.

As of the current CSS Overflow Module Level 3 specification, overflow-clip-margin accepts a single uniform value applied to all four sides. Unlike margin or padding, you cannot specify per-side values like overflow-clip-margin: 10px 20px 30px 40px. If you need asymmetric clipping behavior, consider using clip-path with a custom polygon or combining overflow-clip-margin with other clipping techniques.