Put clip-path: border-box on the parent when a ::before or ::after pseudo-element must be clipped to the parent’s border-box boundary. overflow: hidden clips at the padding box instead, so it can leave the visible border and the clip edge misaligned.
Use clip-path: border-box on the parent
Pseudo-elements are generated by their originating element and behave like child boxes for painting and clipping. The parent can therefore constrain their painted output. MDN describes clip-path as creating a clipping region that determines which part of an element is shown; the border-box geometry-box value uses the border box as the reference, and when supplied by itself its edges define the clipping path. See MDN’s clip-path reference.
<div class="card">
<span class="card__label">Content</span>
</div>.card {
position: relative;
border: 4px solid #222;
border-radius: 16px;
clip-path: border-box;
}
.card::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, #ff7a18, #af002d 70%);
opacity: .35;
pointer-events: none;
}position: relative makes the card the containing block for the absolutely positioned pseudo-element. inset: 0 aligns the pseudo-element’s edges with that containing block; use values such as inset: 8px to pull it inward. The parent’s clip-path, rather than its positioning, supplies the clipping boundary.
Why overflow clips at a different edge
overflow: hidden clips overflow content at the element’s padding box, according to MDN’s overflow reference. With a visible border, that edge lies inside the border, which is why overflow: hidden may not match the parent’s border-box edge. It also creates a scroll container, which can affect keyboard focus and programmatic scrolling.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
overflow: clip clips at an overflow clip edge that can be adjusted with overflow-clip-margin. It does not create a scroll container and does not allow scrolling, but it is not a direct way to request the border-box geometry. Use it when its overflow behavior is the goal, not as a synonym for clip-path: border-box.
Choose the property for the boundary you need
| Goal | Property | What it clips to or does |
|---|---|---|
| Clip to the parent border box, including rounded corners | clip-path: border-box |
Uses the parent’s border box as the clipping path. MDN |
| Hide overflow at a content container’s edge | overflow: hidden |
Clips at the padding box and creates a scroll container. MDN |
| Hide overflow without scroll-container behavior | overflow: clip |
Clips at the overflow clip edge and disallows scrolling. MDN |
| Use legacy rectangular clipping on an absolutely positioned element | clip: rect(...) |
Uses offsets relative to that element’s own edges, not a parent-reference box. CSS 2.2 clipping |
Account for rounded corners, stacking, and ancestor clips
A border-box clip follows the parent’s box geometry, including its rounded corners when border-radius is set. A non-none clip-path also creates a new stacking context. If the pseudo-element and the parent’s content overlap, check their z-index relationships: the new context can change how they stack relative to other elements.
Clipping can also come from an ancestor. When both the parent and an ancestor clip content, the visible result is the intersection of their clipping regions, as described in CSS 2.2’s clipping rules. If the pseudo-element still appears cut off after adding the parent’s border-box clip, inspect ancestor styles for additional clipping.
The legacy clip: rect(...) property is limited to absolutely positioned elements and defines a rectangle using offsets from the clipped element’s own border edges. It does not provide a way to refer to the parent’s border box, so it is not the right tool for this requirement.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Quick Recap
Rank #3
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
