Styling

The constraint

clip-path clips everything an element paints — background, borders, shadows, and every pseudo-element. Nothing can draw outside the clipped silhouette. So plain borders get notched off at each corner step, and rings (box-shadows drawn outside the box) vanish entirely. Every visual has to live inside the silhouette as a layer.

The shape

One polygon traces the staircase corners, sized by --pixel-size (px-rounded-sm/-md). It's used as the element's clip-path, and published as --px-shape so every other layer can reuse the exact same geometry.

The layers

element background   ← the FOCUS RING (transparent until :focus-visible)
::after  (z: -2)     ← the FACE, inset 2px, clipped to --px-shape
::before (z: -1)     ← the BORDER, a polygon with a hole punched in it
button text          ← content paints above all of them

• Ring. The element's own background fills the whole silhouette, but the face and border cover all of it except an outer 2px gutter. On :focus-visible, that background becomes the ring color, so only a 2px band lights up — following the pixel corners exactly, because it is the silhouette's edge. This is why variants set face color through --px-bg instead of bg-*: the background is reserved for the ring.
• Face. A pseudo-element inset by the ring width, clipped to --px-shape at its own smaller size. Hover only ever touches the face, so it physically can't spill past the border.
• Border. One polygon that traces the outer silhouette clockwise, then the same silhouette shrunk by 2px counter-clockwise. The opposite winding punches a hole, leaving a 2px picture frame that hugs the staircase at any thickness.

The seam fix

Layers overlap instead of abutting — the face slides under the border, and the ring runs under everything. Two clipped edges meeting exactly leave a sub-pixel antialiasing gap (a visible hairline); an edge sitting over a continuous layer beneath can't.

One polygon, declared once, worn three ways — clip, face, and hollowed-out frame — stacked so every boundary is an overlap, never a joint.