CSS_Architecture // The_Sticky_Radius_Paradox

The conflict :: sticky vs rounded

We have a UI requirement that seems simple but creates a logical paradox in the CSS engine:

1. A container with rounded corners (rounded-xl).
2. A sticky header inside that container.
3. Content that scrolls under that header.

The Visual Glitch: By default, the header has square corners. Even if the parent is rounded, the header’s background color sits on top of the parent’s border, creating sharp, ugly corners that “bleed” outside the intended geometry.

To crop these sharp corners and force the header to respect the radius, the standard reflex is to apply overflow: hidden to the container.
This is where the trap snaps shut.

! System alert :: context collapse

Applying overflow: hidden (or auto/scroll) to a parent element immediately neutralizes position: sticky.

It creates a hermetic scroll context. Since the container itself doesn’t scroll (the body or a parent does), the sticky element believes it is stationary. The anchor is lost, and the header becomes static.

We are left with a binary choice: a broken layout (bleeding corners) or broken functionality (non-sticky header).
(v.0.9.9) represents the first fail state.

The solution :: the clip-path protocol

Since overflow destroys the sticky behavior, we must strip it out. We replace it with clip-path, which masks the visual area without touching the scroll context.

The Native CSS Approach: To achieve a 12px radius, the raw CSS looks like this:
clip-path: inset(0 round 12px)

The Tailwind Translation: We can port this directly into a utility class using arbitrary values (replacing spaces with underscores):
[clip-path:inset(0_round_12px)]

Iteration v1.0.0 :: the theme injection

Hardcoding 12px creates maintenance debt. If you change your global rounded-xl variable later, this clip-path will break.

We must extract the value dynamically from the Tailwind engine:
[clip-path:inset(0_round_theme(borderRadius.xl))]

Iteration v1.1.0 :: the optical adjustment

v.1.0.0 is functional, but not pixel-perfect.

If your container uses a border, applying the exact same radius to the inner clip-path creates a visual disconnect—a tiny, jarring gap between the border and the content. Geometry dictates that concentric curves must be offset.

To achieve a seamless seal, we simply tighten the radius by subtracting the border width directly inside the class:
[clip-path:inset(0_round_calc(theme(borderRadius.xl)_-_3px))]

Note: For a 2px border, subtracting 3px creates a mathematically flawless fit with zero effort.

System verdict :: visual integrity

Using clip-path solves the rounding issue without breaking the sticky behavior.

Design Note: This technique is particularly powerful because it allows the header to appear “square” initially, and only visually “round” itself against the container edges as you scroll, without needing complex JavaScript observers to toggle classes. The geometry handles the masking automatically.