Ever have a child element spill past its parent’s rounded corners, without overflow: hidden in place? Yeah, me too. But that is where contain: paint; might be the fix you need.
The Quick Fix
.card {
contain: paint;
}contain: paint; tells the browser to isolate the painting of .card into its own layer. That isolation helps enforce the border radius as a hard edge — especially when children use transforms, animations, or absolute positioning.
In short: less bleeding, smoother edges.
It’s not a magic bullet, but in layout fights, contain: paint; can win the round if the need fits the solution that the CSS property contains.
Keep in mind, fixing clipping issues is not the intended goal of the contain property. It was designed to solve much bigger problems. However, it is nice to know that it can also address smaller issues, such as clipping overflow content, as pointed out in this post.
If you want to explore more about contain, here is a quick video segment.
Leave a Reply