In CSS, what is the difference between overflow: hidden and overflow: clip?

## Same picture, different machinery Render a box with `overflow: hidden` and the same box with `overflow: clip` and you cannot tell them apart in a screenshot. The difference is structural: `hidden` produces a **scroll container**, `clip` does not. A scroll container has a scrollport (the visible window) and a scrollable overflow area (everything laid out inside it). The fact that no scrollbars are drawn for `hidden` is a rendering decision, not a statement about scrollability. The container is fully scrollable — just not through a user affordance. ## Why that matters in practice The consequences of accidentally creating a scroll container are the reason this question gets asked: - **The browser can scroll it for you.** If something inside the clipped region receives keyboard focus, or the page navigates to a fragment that lands there, the browser scrolls the clipped content into view. Users see a panel whose top row has silently vanished and no way to scroll back — the scrollbars they would need do not exist. - **Scroll position becomes state.** A scroll container remembers an offset. That offset can be restored on navigation or changed by a nested interaction, producing "why is this box scrolled?" bugs that are invisible in the CSS. - **The box becomes the scroll parent for descendants.** Anything that behaves relative to "the nearest scrolling ancestor" now resolves to this box instead of the page. `overflow: clip` has none of these effects. There is no scrollport, no offset, and no way for user or browser to move the content. When your intent is genuinely "cut off whatever pokes out" — a rounded avatar clipping an image, a decorative shape kept inside a card — `clip` says exactly that. ```css .avatar { inline-size: 3rem; aspect-ratio: 1; border-radius: 50%; overflow: clip; /* not hidden — nothing here should ever scroll */ } ``` ## The clip margin `clip` clips at the *overflow clip edge*, which by default coincides with the padding box. `overflow-clip-margin` moves that edge outward by a length or from a named box: ```css .chip { overflow: clip; overflow-clip-margin: 4px; /* let a focus ring bleed out */ } ``` This solves a real annoyance: clipping a box also shaves off focus rings, outlines and small decorative overhangs that ought to survive. `hidden` has no equivalent knob — the clip edge is the padding edge, full stop. ## Per-axis pairing The pairing rules are the other practical difference. CSS forbids the combination "scrollable in one axis, spilling in the other" for a scroll container: if one of `overflow-x`/`overflow-y` is `visible` and the other is a clipping-and-scrolling value, the `visible` one computes to `auto`. So `overflow-x: hidden; overflow-y: visible` quietly becomes `overflow-y: auto`, and vertical overflow gets clipped and scrolled instead of spilling. `clip` sidesteps this because it is not a scrolling value: `overflow-x: clip` with `overflow-y: visible` is legal and stays as specified. That makes it the correct tool for "stop the horizontal spill but let this dropdown escape downward": ```css .row { overflow-x: clip; overflow-y: visible; /* stays visible — a menu can still escape */ } ``` (Symmetrically, `clip` paired with a scrolling value in the other axis computes to `hidden`.) ## Choosing between them Use `clip` whenever the intent is purely visual containment. Reserve `hidden` for the case where you want a scroll container without user-visible scrollbars — for example a viewport you scroll from script or via scrolling APIs, or a masked strip you drive yourself. If you catch yourself writing `overflow: hidden` next to a comment saying "just to clip the corners", that is a `clip`. Browser support is not a reason to avoid `clip` any more: Firefox shipped it in 2020, Chrome in 2021, Safari in version 16 in 2022. It is worth knowing the older habit exists though — a great deal of existing CSS uses `hidden` for clipping simply because `clip` did not exist when it was written.