Experimenting With Scroll-Driven Corner Shape Animations

Web design constantly pushes the boundaries of geometry and motion. One of the most exciting recent additions to CSS is the corner-shape() property, which provides mathematical precision to your corners, going far beyond the standard border-radius.

Recently, CSS-Tricks published an inspiring article highlighting how to combine this new geometric capability with Scroll-Driven Animations. Let's explore how it works.

What is `corner-shape()`?

Unlike border-radius, which only curves the edges of a rectangle, the corner-shape() property allows you to define complex mathematical shapes for your corners, such as a superellipse. Because these shapes are mathematically defined, the browser natively understands how to interpolate and animate between them smoothly.

For instance, you can define different corner styles like so:

.card {
  corner-shape: superellipse(notch);
}

Combining with Scroll-Driven Animations

Scroll-driven animations link an animation's progress directly to the user's scroll position rather than time. This creates highly interactive and fluid experiences without the need for complex JavaScript event listeners.

Here is an example of animating a sticky header's corners from a notched appearance to perfectly square as the user scrolls down the page:

@keyframes smooth-corners {
  from {
    corner-shape: superellipse(notch);
  }
  to {
    corner-shape: superellipse(square);
  }
}

header {
  position: sticky;
  top: 0;
  
  /* Bind the animation to the scroll progress */
  animation: smooth-corners linear both;
  animation-timeline: scroll();
  animation-range: 0 100px;
}

Try it Out! (Interactive Scroll-Driven Demo)

Scroll down the mock container below. Watch the sticky header morph from round corners (24px radius) to sharp square corners (0px radius) dynamically as the header reaches the sticky threshold—fully powered by CSS:

👇 Scroll down here...

Notice how the header's bottom corners flatten smoothly as you scroll.

This is achieved by linking the animation keyframes directly to the container's scroll timeline.

No JavaScript is used for this micro-interaction.

Browser Support

As with all bleeding-edge CSS features, browser support is something to keep an eye on. Fully supporting scroll-driven corner-shape() animations currently requires Chrome 139+. For other browsers, make sure to provide standard border-radius fallbacks so your users still see a polished interface.

Conclusion