← Back to release summary

Corner shaping (corner-shape, superellipse, squircle)

Category
CSS
Type
New or changed feature
Status
Proposed (Chrome Proposed)
Intent stage
None

Summary

Enable styling corners, on top of the existing border-radius, by expressing the shape/curvature of the corner as a superellipse. This allows shapes like squircles, notches, scoops etc., and animating between them.

Motivation

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

Standards & signals

Explainers: https://github.com/noamr/explainers/blob/main/corner-shape-explainer.md

View on chromestatus.com