v147 · CSS

CSS Corner Shaping

Control the curvature of rounded corners beyond simple ellipses. corner-shape: squircle creates iOS-style app icons, bevel cuts flat corners, notch and scoop curve inward, and superellipse(n) lets you dial any shape between square and circle.

concepts

  1. Shape Gallery

    All six corner-shape values — round, squircle, bevel, notch, scoop, and superellipse(n) — displayed side by side with live toggle to swap between different border-radius sizes and colours.

  2. Squircle Showcase

    Deep dive on corner-shape: squircle — the shape used for iOS app icons. Compares it against border-radius: 50% (circle), a high-border-radius rounded rect, and the superellipse approximation. Shows real use cases: app icons, cards, avatar thumbnails.

  3. Shape Picker

    Live playground: choose a corner-shape value, adjust border-radius, and apply it to three sample UI components — a button, an icon badge, and a card. Generated CSS updates as you type.

  4. Corner-by-Corner

    Each of the four corners can take a different shape via the longhands corner-top-left-shape, corner-top-right-shape, corner-bottom-right-shape, corner-bottom-left-shape. Mix bevel + notch + squircle on a single element.

  5. Superellipse Explorer

    Drag a slider to move the n parameter from 1 (diamond) through 2 (circle) to 10 (near-square) and see the shape update in real time. Named values like squircle and round are annotated at their corresponding n equivalents, with a comparison grid of all named values.

  6. Shape Animation

    Shows what is and isn't interpolatable: superellipse(n) transitions smoothly because n is a number; named values (squircle, bevel, notch) snap discretely. Side-by-side keyframe animations, hover transitions with different easing functions, and a play/pause speed control.

why it shipped

border-radius has controlled the size of rounded corners since CSS3, but the shape of those corners has always been locked to an elliptical arc. The "squircle" — the superellipse shape used by Apple for iOS app icons — became something every design system wanted, but CSS could not express it: developers had to resort to SVG clip paths, canvas rendering, or pixel-density-dependent image sprites. corner-shape exposes the same mathematical family of shapes (superellipse, bevel, notch, scoop) as a CSS property, composable with the existing border-radius sizing system. The same element can now use border-radius: 30% to set the size and corner-shape: squircle to set the curvature style.

references

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗