v139 · 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 Playground

    corner-shape changes the curve used to draw rounded corners. superellipse(3) gives the iOS-style squircle; squircle is shorthand for superellipse(2.5).

  2. Notch & Scoop Gallery

    Beyond squircles: notch, scoop, bevel, and straight values create cuts and concave corners. Useful for tickets, tags, and stamps — the design patterns the explainer specifically calls out.

  3. Superellipse Comparator

    One k slider, four cards: round-rect, squircle, scoop, and free-dial superellipse(k). Watch how the exponent maps to perceived smoothness and see the formula behind the curve.

  4. Component Kit

    Pick one corner-shape value and watch every UI component — buttons, badges, avatars, chips, and inputs — update at once. A practical feel for how the property scales across a real design system.

  5. Per-Corner Mixer

    Set a different corner-shape value on each of the four corners independently — mix squircle, notch, scoop, bevel, straight, and custom superellipse(k). Presets show practical uses: ticket stubs, iOS icons, arrow tabs, price tags, and chat bubbles. Live CSS output shows both the longhand and shorthand forms.

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