v136 · css

Corner shaping (corner-shape, superellipse, squircle)

Enable styling corners, on top of the existing border-radius, by expressing the shape/curvature of the corner as a superellipse.

concepts

  1. Squircle

    corner-shape changes the curve used for rounded corners — superellipse, squircle, scoop.

  2. Icon Grid & Chat Bubbles

    Two canonical motivations: an iOS-style app icon grid you can flip from round to squircle, and chat bubbles with one scooped tail corner via the per-corner corner-bottom-*-shape properties.

  3. Shape Explorer

    Every value the spec accepts — round, scoop, bevel, notch, straight, squircle, and arbitrary superellipse(N) — with a live exponent slider that morphs the curve from circle to square.

  4. Animated Morpher

    Animatable corner-shape: hover cards morph round ↔ squircle, round ↔ bevel, squircle ↔ notch. Plus an auto-cycle @keyframes that sweeps four shapes on loop.

  5. Card Builder

    Interactive card builder with full control over global or per-corner corner-shape, border-radius, superellipse(n) exponent, card width, and colours. Generates ready-to-copy CSS.

  6. Design System

    A complete UI kit — buttons, badges, avatars, inputs, cards — all driven by two CSS tokens: --ds-shape and --ds-radius. Switch the design theme (Round / Squircle / Bevel / Sharp) and every component morphs together.

why it shipped

Corners that are not exactly straight and not entirely round are very common in designs, e.g. on mobile platforms. However, on the web they are difficult to achieve, and Today it's very verbose and cumbersome to

references