Scroll effects have meant a JavaScript library for years, usually GSAP or something like it. Scroll-Driven corner-shape Animations landed in Chrome 139+ and hand that work back to CSS. It is part of the Interop 2026 push: the browser does the viewport-relative math for you, and the main-thread jank leaves with the library.
The math behind scroll-driven corner-shape animations
Most of us treat border-radius as rounded or not rounded, and that is the end of it. The corner-shape property is more mathematical than that. Its superellipse() function defines the curvature through a coordinate system instead of a fixed radius, and once that is tied to a scroll timeline the shape morphs as the reader scrolls.
The usual gotcha is assuming corner-shape replaces border-radius. It does not. The radius is the size of the canvas and corner-shape is the brush, so a radius of zero leaves the shape nowhere to render. Set both or you see nothing.
/* The Naive Implementation */
.box {
border-radius: 50%;
/* This works, but it's basic */
corner-shape: round;
}Refactoring for smoothness
The first thing you notice with Scroll-Driven corner-shape Animations is how harsh the transition between keywords like notch and square feels. The browser is interpolating between mathematical infinities to get there. Pass raw numbers to superellipse() instead of keywords and the curve settles down. Stretching the element slightly past the viewport with a negative inset also kills the “sucked-in” look at the start of the animation.
/* The Refactored Senior-Dev Approach */
@keyframes bbioon_shape_morph {
from {
/* Avoid -infinity, use a specific exponent */
corner-shape: superellipse(-6);
}
to {
corner-shape: superellipse(6);
}
}
.scroll-element {
position: fixed;
inset: -1rem; /* Over-draw to hide harsh edges */
background: #fff;
mix-blend-mode: difference;
border-bottom-left-radius: 100%;
/* Link to scroll position */
animation: bbioon_shape_morph linear;
animation-timeline: scroll();
}I used the same kind of native technique to drop bulky JS in an earlier guide on killing framework bloat. The gain is measurable, most of all on cheap mobile hardware where scroll events choke the CPU.
Stacking contexts and blend modes
One from a recent refactor: mix-blend-mode: difference on a pseudo-element breaks the stacking context for your main content. The text vanishes, or it is still there but nothing is clickable, and the cause is almost always a layer you forgot to isolate. Put isolation: isolate on the cards or the content wrapper and the blend stops eating your UI.
If scroll-driven corner-shape animations are eating your dev hours, I can take it on. I have been working with WordPress since the 4.x days.
Takeaway
Native CSS is closing the gap on the expensive animation engines. Scroll-Driven corner-shape Animations give you mathematical UI effects with no JavaScript in the page at all. Support stops at Chrome 139+ for now, though the MDN documentation and the Interop 2026 roadmap both point to it going baseline before long. Debug your curvature exponents, isolate your blend modes, and ship.
