PLAY CSS
jaen

Box

overflow-clip-margin

overflow-clip-margin sets where a box with overflow: clip cuts off its overflowing content. Use it to let content paint a little beyond the box, so that shadows and decorations are not cut off halfway.

Syntax

<visual-box> || <length [0,∞]>
<visual-box> = content-box | padding-box | border-box

Preview

Open https://example.com/a/very/long/path to see more. The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。きのうは雨でしたが、けさはよく晴れています。
Presets
Drag the bottom-right corner to resize

Code

.box {
  overflow: clip;
  border: 8px dashed rgb(31 41 55 / 0.3);
  overflow-clip-margin: 32px;
}

Controls

<visual-box>padding-box
<visual-box>
<length>32px
Open https://example.com/a/very/long/path to see more. The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。きのうは雨でしたが、けさはよく晴れています。

About

Writing the value

  • content-box, padding-box, border-box: which edge the clip starts from. Without one it is padding-box, the outside of the padding and the inside of the border.
  • A length: how far beyond that edge the content may paint. Without one it is 0. Negative values and percentages are not allowed.
  • The two go in any order, and either can be left out. The initial value is 0px, which clips right inside the border.

The preview gives the box overflow: clip and a dashed border, and fills it with text too long to fit. Adding a length lets the text paint past the border.

When to use it

When you contain content with overflow: clip but do not want to cut off things that reach slightly outside, such as item shadows or focus outlines, widen the clip by that much. Unlike overflow: hidden, the box does not become a scroll container, so it does not get in the way of position: sticky either.

Watch out

  • It only affects boxes whose overflow is clip (and boxes with contain: paint). With hidden or auto, nothing changes. In Chrome it works only when both axes are clip.
  • The corners of the clip follow the box's border-radius.
  • The length works from Chrome and Edge 90 and Firefox 102, and the keywords choosing the edge from Chrome and Edge 104 and Firefox 148. Safari does not support it yet.
  • Newer spec drafts also allow negative values that shrink the clip inside the edge, but Chrome does not accept them yet.

References

MDN Web Docsoverflow-clip-marginSpecificationCSS Overflow Module Level 3Can I useoverflow-clip-margin

Comments

PLAY CSS