Imperator Design
Library
Categories
Showcase
The library

Techniques, not templates

Every trick recreated from the source video as a live, self-contained demo. Search, filter, open, steal.

1 / 3

Squircles in CSS: corner-shape Cuts the Corner

Chromium 139 and up only. Safari and Firefox drop the declaration and keep the border-radius, which is the rounded box you already ship, so the fallback costs nothing. A round corner is a quarter circle: it meets the straight edge at an angle. corner-shape says which curve cuts the corner instead, and squircle keeps curving into the edge, the shape phone home screens have used for a decade. It needs a border-radius to work on, since that is what says how far the corner is cut. Every named value is one point on a single curve: bevel is superellipse(0), round is superellipse(1), squircle is superellipse(2), and negatives scoop the corner inwards. notch and square sit at the two infinities.

cssborder-radiusuino-jscornersshapesiconscorner-shape
2 / 3

Continuous Date Range Picker

This UI component demonstrates how to visually represent a selected date range in a calendar. The start and end dates of the range feature rounded 'caps', while all intermediate dates maintain square corners, creating a continuous, flowing highlight effect.

cssborder-radiusinteractioncalendarrange selectiondate picker
3 / 3

Concentric Nested Corners

Achieve visually harmonious nested rounded corners by calculating the inner element's border-radius as the outer radius minus the padding value, ensuring curves remain concentric.

csslayoutui/uxborder-radiusnestingdesign-system