Pixel Utilities
The three utility classes every 8bit component is built from: px-rounded-*, px-border-*, and px-ring.
Rounded corners
px-rounded-sm cuts one square notch per corner; px-rounded-md cuts a two-step staircase. Size is controlled by --pixel-size, so the "radius" scales with a single variable instead of border-radius.
Pixel size
--pixel-size is the one knob that scales the whole cut — set it as an arbitrary property on the element (or an ancestor, since it inherits like any custom property). Every px-rounded-*/px-border-*/px-ring utility on that element reads the same value, so the corners and the border thickness of the notch stay in sync automatically.
Border
px-border-* draws a notched border as a ::before pseudo-element, sized to the same --pixel-size as the element it's on. Its polygon only lines up with the parent's own clip-path if they're the same step — px-border-sm must be paired with px-rounded-sm, and px-border-md with px-rounded-md. Mixing sizes clips the border against a differently-shaped silhouette and the corners come out visibly broken, as shown below. Color comes from --px-border-color (falls back to var(--border)), thickness from --px-border-width (default 2px).
Rounded on one side
For elements that sit flush against a neighbor on every side but one — the first/last row in a list, the first/last button in a group — round only the outer edge instead of keeping all four corners. px-rounded-t-md/px-rounded-b-md round the top/bottom two corners, for the top/bottom item in a vertical stack; px-rounded-l-md/px-rounded-r-md do the same for the first/last item in a horizontal row. Placed directly against each other with no gap, a pair reads as one continuous rounded group. px-rounded-t-sm/px-rounded-b-sm are the single-step versions, and px-rounded-tl-md/-tr-md/-bl-md/-br-md round just one corner instead of a whole edge.
Focus ring
px-ring turns the element's own background into the ring on :focus-visible — a ::after pseudo, inset and clipped to the same silhouette as its paired px-rounded-*, paints the visible face on top. Set the face color with --px-bg, never a bg-* utility: the real background is reserved for the ring. Tab to the button below to see it.